nsgk_mobile/src/views/sunVillage_info/fixedAssets.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">
            <selector :visible.sync="typeVisible" v-model="queryParams.operationType" :columns="operation_type" clear value-key="dictValue" label-key="dictLabel" @confirm="refresh" @cancel="refresh">
              <template>
                <van-icon name="filter-o" color="#1989fa" class="filter-icon" @click="openAssetType" />
              </template>
            </selector>
          </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:'sunVillageInfoFixedAssetsDetail',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.assetType}}</div>
               </div>
               <div class="function_block">
                 <div class="time">
                   <i class="icon"></i>
                   {{item.buildTime}}
                 </div>
                 <div :class="{'state':true,'normal':item.assetStatus == '正常','sell':item.assetStatus=='出售','scrap':item.assetStatus=='报废'}">{{item.assetStatus}}</div>
                 <div class="value">原值<span class="amount">￥{{item.originalValue}}</span></div>
               </div>
             </div>
             <template #right>
               <div @click="handleDelete(item,index)" style="background-color: #ee0a24;height: 100%">删除</div>
               <router-link :to="{name:'sunVillageInfoFixedAssetsEdit',query:{id:item.id}}" style="background-color: #07c160">修改</router-link>
               <div @click="openLoader(item.id,0)" style="background-color: rgba(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>

       <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="showMap" lock-scroll position="top" :style="{ height: '80%' }" >
          <div style="padding: 0;text-align: center">
            <MapGisTag ref="clickLoading" :showBtn="true" :message="theGeom" v-on:formSubmit="MapTag" :permanentId="permanentId" :permanents="permanents"></MapGisTag>
            <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>

     </div>
 </template>
 <script>
   import {
     permanentList,
     commonAttach,
     attachmentList,
     systemAttachment,
     delPermanent,
     updatePermanent,
     getPermanent,
     clearPermanentGeom,
   } from "@/api/sunVillage_info/fixedAssets";
   import request from '@/utils/request'
   import MapGisTag from "@/components/Map/MapGisTagDTGCopy";
   import Selector from "@/components/common/Selector.vue";
   export default {
     name: "certificateList",
     components: {
       Selector,
       MapGisTag
     },
     data() {
       return {
         applicationList:[],
         assetStatusOptions:[],
         auditStatus:[],
         loading: false,
         finished: false,
         show: false,
         fileList:[],
         listLength:'0',
         searchInput:'',
         queryParams:{
           pageNum:1,
           pageSize:10,
           orderByColumn:'createTime',
           isAsc:'desc',
           name:'',
           operationType: null,
         },
         uploadFiles1:[],
         projectId:'',
         projectIndex:'',
         showBtn:true,
         showMap:false,
         theGeom:'',
         listMap:0,
         permanentId: null,   // 固定资产ID
         permanents: [],      // 固定资产列表，存储本账套下所有的固定资产信息
         typeVisible: false,
         operation_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("operation_type").then((response) => {
         this.operation_type = response.data;
       });
     },
     methods: {
       openMap(id, theGeom,index){
         permanentList().then(response => {
           this.showMap = true;
           this.permanentId = id;
           this.theGeom = theGeom;
           this.listMap = index;
           this.permanents = response.rows;
           this.mapClickLoading();
         });
       },
       //获取自己返回值
       /** 查找地图中定位点 */
       MapTag: function (data) {
         // this.applicationList[this.listMap].theGeom = data;
         this.theGeom = data;
       },
       //每个查看修改，新增  方法下引用下面方法
       mapClickLoading(){
         setTimeout(() => {
           this.$refs.clickLoading.pointPaceCountryDarw();
         }, 500);
       },
       saveGeom(){
         var that = this;
         updatePermanent({id: this.permanentId, theGeom: this.theGeom}).then((response) => {
           if (response.code == 200){
             this.$notify({ type: 'success', message: '修改成功' });
             setTimeout(function(){
               that.showMap = false;
               getPermanent(that.permanentId).then(response => {
                 that.applicationList[that.listMap].theGeom = response.data.theGeom;
               });
             },500)
           }
         });
       },
       clearLayer() {
         this.$dialog.confirm({
           message: '是否清除图层？',
         }).then(() => {
           // on confirm
           clearPermanentGeom(this.permanentId).then(res => {
             if (res.code === 200) {
               this.$notify({ type: 'success', message: '清除成功' });
               this.showMap = false;
               this.applicationList[this.listMap].theGeom = null;
             }
           });
         }).catch(() => {
           // on cancel
         });
       },
       getList(){
         setTimeout(() => {
           permanentList(this.queryParams).then(response => {
             this.listLength = response.total;
             for (var i = 0; i < response.rows.length; i++) {
               response.rows[i].assetStatus = this.selectDictLabel(this.assetStatusOptions, response.rows[i].assetStatus);
               response.rows[i].assetType = this.selectDictLabel(this.assetTypeOptions, response.rows[i].assetType);
               response.rows[i].useType = this.selectDictLabel(this.useTypeOptions, response.rows[i].useType);
               // response.rows[i].originalValue = Number(response.rows[i].originalValue ).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { return $1 + ","; }).replace(/\.$/, "")
               this.applicationList.push(response.rows[i]);
             }
             if(this.applicationList.length >= response.total){
               this.finished = true;
               return;
             }else{
               this.loading = false;
               this.queryParams.pageNum += 1 ;
             }
           });
         }, 1000);
       },
       afterRead(file) {
         // 此时可以自行将文件上传至服务器
         console.log(file)
            this.uploadFiles1.push(file.file);
           let params1 = new FormData();
           params1.append("tableId", this.projectId);
           params1.append("tableName", "t_asset_permanent");
           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_permanent",
           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 assetStatus = row.assetStatus ? row.assetStatus : data[0].assetStatus;
         if (assetStatus === '2' || assetStatus === '3') {
           this.$notify({
             message: "不允许删除已出售或已报废的资产",
             type: "warning",
           });
           return;
         }
         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 delPermanent(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/fixedAssetsAdd')
       },
       openAssetType() {
         this.typeVisible = true;
       },
       refresh() {
         this.queryParams.pageNum = 1;
         this.listLength = 0;
         this.applicationList = [];
         this.finished = false;
         this.getList();
       },
     },
     computed: {
       searchPlaceholder() {
         let typeName = this.operation_type.find((x) => x.dictValue == this.queryParams.operationType);
         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>