nsgk_mobile/src/views/sunVillage_info/resource.vue

 <template>
     <div class="home_wrapper">
       <div class="header_main">
           资源管理
           <div class="return_btn" @click="onClickLeft"></div>
           <div class="add_btn" @click="goAdd"></div>
       </div>
       <div class="search_info">
          <div class="search_block">
              <i class="icon"></i>
              <input type="text" class="ipt" v-model="queryParams.name" :placeholder="searchPlaceholder" @input="getSearchList">
            <van-icon name="filter-o" color="#1989fa" class="filter-icon" @click="openResourceType" />
          </div>
          <div class="total">共{{listLength}}个资源</div>
       </div>
       <div class="list_main">
         <van-list
           v-model="loading"
           :finished="finished"
           finished-text="没有更多了"
           @load="getList"
         >
          <!--1-->
           <van-swipe-cell right-width="200" class="item" v-for="(item,index) in applicationList" :key="index">
             <div class="item_box" @click="$router.push({name:'sunVillageInfoListResourceDetail',query:{id:item.id}})">
               <div class="head_block">
                 <i class="icon"></i>
                 <div class="title">{{item.name}}</div>
                 <div class="describe">{{item.useType}}</div>
               </div>
               <div class="order_block">
                 <div class="order">{{item.code}}</div>
                 <div class="describe">{{item.resourceSort}}</div>
               </div>
             </div>
             <template #right>
               <div @click="handleDelete(item,index)" style="background-color: #ee0a24;height: 100%">删除</div>
               <router-link :to="{name:'sunVillageInfoListResourceEdit',query:{id:item.id}}" style="background-color: #07c160">修改</router-link>
               <div @click="openLoader(item.id,0)" style="background-color: rgb(98,173,102,0.2);color: #62AD66;">附件</div>
               <div @click="openMap(item.id, item.theGeom,index)" style="background-color: #62AD66;color: #ffffff;">地图</div>
             </template>
           </van-swipe-cell>

         </van-list>
       </div>
<!--         <div class="bottom_tips">-->
<!--            <span class="xs">已经到底啦</span>-->
<!--         </div>-->

       <van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '80%' }" >
         <div style="padding: 0;text-align: center">
           <MapGisLine ref="clickLoading" :message="theGeom" v-on:formSubmit="MapTag" :resourceId="resourceId" :resourceList="resourceList"></MapGisLine>
<!--           <div>地图信息：绿色地块表示该地块，蓝色表示本账套已标记的其他地块</div>-->
           <div style="margin-top: 1.5vh">
             <van-button type="info" size="small" @click="saveGeom">保存</van-button>
             <van-button type="danger" size="small" @click="clearLayer">清除图层</van-button>
             <van-button plain type="info" size="small" @click="showMap = false">取消</van-button>
           </div>
         </div>
       </van-popup>

       <van-popup v-model="show" lock-scroll closeable position="top" :style="{ height: '30%' }" >
          <div style="padding: 0 13% 0 5%;">
            <van-divider>附件</van-divider>
            <van-uploader v-model="fileList" :after-read="afterRead" @delete="deleteFile1" multiple />
          </div>
       </van-popup>

       <van-popup v-model="typeVisible" lock-scroll closeable position="top" >
         <div style="padding: 0.2rem 0.3rem 0.3rem;">
           <van-cell-group>
             <van-cell>
               <div style="text-align: center; font-size: 18px;">筛选</div>
             </van-cell>
             <van-cell>
               <van-checkbox v-model="queryParams.noMap" :border="false">未上图</van-checkbox>
             </van-cell>
             <van-cell>
               <van-checkbox v-model="queryParams.params.noAttachment" :border="false">无附件</van-checkbox>
             </van-cell>
             <field-select
               v-model="queryParams.resourceType"
               label="资源分类"
               value-key="dictLabel"
               data-key="dictValue"
               placeholder="选择资源分类"
               :columns="resource_type"
               :clearable="true"
             />
           </van-cell-group>
           <div style="padding: 0.2rem 0.5rem 0;">
             <van-button round type="primary" block @click="refresh">搜索</van-button>
           </div>
         </div>
       </van-popup>
     </div>
 </template>
 <script>
   import {
     listResource,
     commonAttach,
     attachmentList,
     systemAttachment,
     delResource,
     updateResource,
     getResource,
     clearResourceGeom
   } from "@/api/sunVillage_info/fixedAssets";
   import request from '@/utils/request'
   import MapGisLine from "@/components/Map/MapGisLine";
   import Selector from "@/components/common/Selector.vue";
   import FieldSelect from "@/components/form/FieldSelect.vue";
   export default {
     name: "certificateList",
     components: {FieldSelect, Selector, MapGisLine,},
     data() {
       return {
         theGeom:'',
         applicationList:[],
         applicationListSecond:[],
         assetStatusOptions:[],
         auditStatus:[],
         loading: false,
         finished: false,
         show: false,
         showMap: false,
         fileList:[],
         listLength:'0',
         searchInput:'',
         queryParams:{
           pageNum:1,
           pageSize:10,
           orderByColumn:'createTime',
           isAsc:'desc',
           translate_dict:1,
           name:'',
           resourceType: null,
           noMap: false,
           params: {
             noAttachment: false,
           },
         },
         uploadFiles1:[],
         projectId:'',
         projectIndex:'',
         showBtn:true,
         listMap: 0,
         resourceId: null,    // 资源ID，记录当前资源的ID
         resourceList: [],     // 资源列表，存储本账套下所有的资源信息
         typeVisible: false,
         resource_type: [],
       };
     },
     created() {
       this.houseGetDicts("asset_status").then((response) => {
         this.assetStatusOptions = response.data;
       });
       this.houseGetDicts("asset_type").then((response) => {
         this.assetTypeOptions = response.data;
       });
       this.houseGetDicts("use_type").then((response) => {
         this.useTypeOptions = response.data;
       });
       this.houseGetDicts("resource_type").then((response) => {
         this.resource_type = response.data;
       });
     },
     methods: {
       saveGeom(){
         var that = this;
         updateResource({id: this.resourceId, theGeom: this.theGeom}).then((response) => {
           if (response.code == 200){
             this.$notify({ type: 'success', message: '修改成功' });
             setTimeout(function(){
               that.showMap = false;
               getResource(that.resourceId).then(response => {
                 that.applicationList[that.listMap].theGeom = response.data.theGeom;
               });
             },500)
           }
         });
       },
       clearLayer() {
         this.$dialog.confirm({
           message: '是否清除图层？',
         }).then(() => {
           // on confirm
           clearResourceGeom(this.resourceId).then(res => {
             if (res.code === 200) {
               this.$notify({ type: 'success', message: '清除成功' });
               this.showMap = false;
               this.applicationList[this.listMap].theGeom = null;
             }
           });
         }).catch(() => {
           // on cancel
         });
       },
       openMap(id, theGeom,index){
         listResource().then(response => {
           this.showMap = true;
           this.resourceId = id;
           this.theGeom = theGeom;
           this.listMap = index;
           this.resourceList = response.rows;
           this.mapClickLoading();
         });
       },
       //每个查看修改，新增  方法下引用下面方法
       mapClickLoading(){
         setTimeout(() => {
           this.$refs.clickLoading.drawingPaceCountryLine();
         }, 1000);
       },
       /** 查找地图中定位点 */
       MapTag: function (data) {
         // this.applicationList[this.listMap].theGeom = data;
         this.theGeom = data;
       },
       guidProduct(){
         return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
           var r = Math.random() * 16 | 0,
             v = c == 'x' ? r : (r & 0x3 | 0x8);
           return v.toString(16);
         });
       },
       getList(){
         this.loading = true;
         listResource(this.queryParams).then(response => {
           this.listLength = response.total;
           response.rows.forEach(item => {
             this.applicationList.push(item);
           });
           if(this.applicationList.length >= response.total){
             this.finished = true;
             return;
           }else{
             this.loading = false;
             this.queryParams.pageNum += 1 ;
           }
         });
       },
       afterRead(file) {
         // 此时可以自行将文件上传至服务器
         console.log(file)
            this.uploadFiles1.push(file.file);
           let params1 = new FormData();
           params1.append("tableId", this.projectId);
           params1.append("tableName", "t_asset_resource");
           params1.append("bizPath", "asset");
           params1.append("fileType", this.projectIndex);
           params1.append("file", file.file);
           commonAttach(params1).then((r1) => {
             this.$notify({ type: 'success', message: '上传成功' });
           })
       },
       openLoader(id,index){
         this.show = true;
         this.projectId = id;
         this.projectIndex = index;
         this.fileList = [];
         let oData1= {
           tableId: id,
           tableName: "t_asset_resource",
           bizPath: "asset",
           fileType: '',
         }
         attachmentList(oData1).then(res => {
           res.rows.map(r => {
             let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
             this.fileList.push({"url":baseUrl + r.fileUrl,"file":new File([],r.fileName,{}),"id":r.id})
           })
         })
       },
       /** 删除按钮操作 */
       handleDelete(row,index) {
         let useType = row.useType;
         if(useType == 3) {
           this.$notify({
             message: "出租或出借的资产不允许删除",
             type: "warning",
           });
           return ;
         }
         const ids = row.id || this.ids;

         this.$dialog.alert(
           {
             message:'是否确认删除资源资产?',
             title:"警告",
             showCancelButton:true,
             confirmButtonText: "确定",
             cancelButtonText: "取消",
           }
         )
           .then(function () {
             return delResource(ids);
           })
           .then(() => {
             this.applicationList.splice(index, 1);
             this.$notify({ type: 'success', message: '删除成功' });
           });
       },
       getSearchList(){
         this.applicationList = [];
         this.queryParams.pageNum = 1;
         this.finished = false;
         this.getList();
       },
       deleteFile1(file){
         console.log(file)
         systemAttachment(file.id).then(res => {
           this.$notify({ type: 'success', message: '删除成功' });
         })
       },
       goAdd(){
         this.$router.push('/sunVillage_info/resourceAdd')
       },
       openResourceType() {
         this.typeVisible = true;
       },
       refresh() {
         this.typeVisible = false;
         this.queryParams.pageNum = 1;
         this.listLength = 0;
         this.applicationList = [];
         this.finished = false;
         this.getList();
       },
     },
     computed: {
       searchPlaceholder() {
         let typeName = this.resource_type.find((x) => x.dictValue == this.queryParams.resourceType);
         return '搜索' + (typeName ? typeName.dictLabel : '');
       },
     }
   }
 </script>
 <style scoped lang="scss">
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        position: relative;

        .return_btn {
            width: 24px;
            height: 43.2px;
            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }

        .add_btn {
            width: 56.4px;
            height: 40.8px;
            background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
    .search_info{
        padding:20px 23px;
        display: flex;
        .search_block{
        height: 59px;
        width: 535px;
        border-radius: 59px;
        background: #fff;
        display: flex;
        border:2px solid #3494ff;
        padding-right: 20px;
        align-items: center;
          position: relative;
        .icon{
            width: 30px;
            height: 30px;
            background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
            background-size: 100% 100%;
          display: inline-block;
            margin:0 8px 0 26px;
          position: absolute;
          left: 0;
          bottom: 0.15rem;
        }
          .ipt{
            flex: 1;
            font-size: 26px;
            background: none;
            border:0 none;
            line-height: 59px;
            display: inline-block;
            margin-left: 64px;
          }
          .filter-icon {
            font-weight: bold;
            font-size: .4rem;
            width: .6rem;
            text-align: center;
            position: absolute;
            right: 0.2rem;
            bottom: 0.15rem;
          }
        }
        .total{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #858585;
        }
    }
    .list_main{
        padding:0 22px;
        .item{
            /*height: 198px;*/
            border-radius: 30px;
            background: #fff;
            box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
            margin-bottom: 20px;
            .item_box{
              padding:25px 32px;
            }
            .head_block{
                height: 56px;
                display: flex;
                align-items: center;
                width: 100%;
                .icon{
                    width: 34px;
                    height: 30px;
                    background: url('../../assets/images/sunVillage_info/fixedAssets_icon_2.png') no-repeat;
                    background-size: 100% 100%;
                    display: block;
                    margin-right: 12px;
                }
                .title{
                    flex:1;
                    font-size: 32px;
                    color: #252525;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-right: 20px;

                }
                .describe{
                    height: 34px;
                    padding: 0 15px;
                    font-size: 24px;
                    color: #3494ff;
                    background: #e6f2ff;
                    border-radius: 8px;
                }
            }
            .order_block{
                height: 50px;
                display: flex;
                align-items: center;
                width: 100%;
                .order{
                    flex: 1;
                    font-size: 26px;
                    color: #252525;
                }
                .describe{
                    font-size: 26px;
                    color: #3494ff;
                }
            }
            .function_block{
                height: 46px;
                display: flex;
                align-items: center;
                .time{
                    display: flex;
                    flex: 1;
                    align-items: center;
                    font-size: 24px;
                    color: #858585;
                    .icon{
                        width: 25px;
                        height: 25px;
                        background: url('../../assets/images/sunVillage_info/fixedAssets_icon_3.png') no-repeat;
                        background-size: 100% 100%;
                        display: block;
                        margin-right: 8px;
                    }
                }
                .state{
                    /*flex: 1;*/
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &.sell{
                        color: #f69600;
                    }
                    &.scrap{
                        color: #858585;
                    }
                    &.normal{
                        color: #68c000;
                    }
                }
                .value{
                    flex:1;
                    display: flex;
                    align-items: center;
                    justify-content:flex-end;
                    font-size: 24px;
                    color: #858585;
                    .amount{
                        color: #eb1616;
                    }
                }
            }

        }
    }
    .bottom_tips{
        font-size: 24px;
         color: #a7a6a6;
         text-align: center;
         margin-top: 32px;
         background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
         background-size: 260px 2px;
         .xs{
            padding:0 8px;
            background: #e9e9e9;
         }
    }
    /deep/ .van-swipe-cell__right{
      display: flex;
      align-items: center;
      width: 200PX;
      margin-left: 5PX;
      a,div{
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 14PX;
        height: 100%;
        flex: 1;
      }
    }

}







 </style>