zhangzl
/
nsgk_mobile
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1290 Commits
7 Branches
79 MiB
 
 
Tree: 9018a2e20f
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '9018a2e20f'
${ noResults }
nsgk_mobile/src/views/sunVillage_info/information.vue

430 lines
14 KiB
Raw Blame History 

  1.  <template>

  2.      <div class="home_wrapper">

  3.          <div class="header_main">

  4.              合同信息

  5.              <div class="return_btn" @click="onClickLeft"></div>

  6.              <div class="add_btn" @click="goAdd"></div>

  7.          </div>

  8.          <div class="search_info">

  9.             <div class="search_block">

  10.                 <i class="icon"></i>

  11.                 <input type="text" class="ipt" placeholder="搜索" v-model="queryParams.name" @input="getSearchList">

  12.             </div>

  13.             <div class="total">共{{listLength}}个合同</div>

  14.          </div>

  15.          <div class="list_main">

  16.            <van-list

  17.              v-model="loading"

  18.              :finished="finished"

  19.              finished-text="没有更多了"

  20.              @load="getList"

  21.            >

  22.              <!--1-->

  23.              <van-swipe-cell right-width="150" class="item" v-for="(item,index) in applicationList" :key="index">

  24.                 <div class="item_box" @click="$router.push({name:'sunVillageInfoInformationDetail',query:{id:item.id}})">

  25.                   <div class="head_block">

  26.                       <i class="icon"></i>

  27.                       <div class="title">{{item.name}}</div>

  28.                   </div>

  29.                   <div class="order_block">

  30.                       <div class="order">{{item.code}}</div>

  31.                       <div :class="{'describe':true,'suspend':item.contractionStatus == '撤销','normal':item.contractionStatus == '正常','undo':item.contractionStatus == '终止'}">{{item.contractionStatus}}<i class="icon"></i></div>

  32.                   </div>

  33.                   <div class="function_block">

  34.                      <div class="value">合同金额<span class="amount">￥{{item.totalAmount}}</span></div>

  35.                      <div class="startStop_time">

  36.                         <div class="time"><div class="unim start">起</div>{{item.startTime}}</div>

  37.                         <div class="time"><div class="unim stop">止</div>{{item.endTime}}</div>

  38.                      </div>

  39.                   </div>

  40.                 </div>

  41.                <template #right>

  42.                  <div @click="handleDelete(item,index)" style="background-color: #ee0a24;height: 100%">删除</div>

  43.                  <router-link :to="{name:'sunVillageInfoInformationEdit',query:{id:item.id}}" style="background-color: #07c160">修改</router-link>

  44.                  <div @click="openLoader(item.id,0)" style="background-color: rgba(98,173,102,0.2);color: #62AD66;">附件</div>

  45.                </template>

  46.              </van-swipe-cell>

  47.            </van-list>

  48. 

  49.          </div>

  50. <!--         <div class="bottom_tips">-->

  51. <!--            <span class="xs">已经到底啦</span>-->

  52. <!--        </div>-->

  53.        <van-popup v-model="show" lock-scroll closeable position="top" :style="{ height: '30%' }" >

  54.          <div style="padding: 0 13% 0 5%;">

  55.            <van-divider>附件</van-divider>

  56.            <van-uploader v-model="fileList" :after-read="afterRead" @delete="deleteFile1" multiple />

  57.          </div>

  58.        </van-popup>

  59.     </div>

  60. </template>

  61. 

  62. <script>

  63.  import { contractionList , delInfo , commonAttach , attachmentList , systemAttachment } from "@/api/sunVillage_info/fixedAssets";

  64.  import request from '@/utils/request'

  65.  export default {

  66.    name: "certificateList",

  67.    data() {

  68.      return {

  69.        applicationList:[],

  70.        applicationListSecond:[],

  71.        assetStatusOptions:[],

  72.        auditStatus:[],

  73.        loading: false,

  74.        finished: false,

  75.        show: false,

  76.        fileList:[],

  77.        listLength:'0',

  78.        searchInput:'',

  79.        queryParams:{

  80.          pageNum:1,

  81.          pageSize:10,

  82.          orderByColumn:'createTime',

  83.          isAsc:'desc',

  84.          name:'',

  85.        },

  86.        uploadFiles1:[],

  87.        projectId:'',

  88.        projectIndex:''

  89.      };

  90.    },

  91.    created() {

  92.      this.houseGetDicts("contraction_status").then((response) => {

  93.        this.contractionStatusOptions = response.data;

  94.      });

  95.    },

  96.    methods: {

  97.      getList(){

  98.        setTimeout(() => {

  99.          contractionList(this.queryParams).then(response => {

  100.            this.listLength = response.total;

  101.            for (var i = 0; i < response.rows.length; i++) {

  102.              response.rows[i].contractionStatus = this.selectDictLabel(this.contractionStatusOptions, response.rows[i].contractionStatus);

  103.              response.rows[i].totalAmount = Number(response.rows[i].totalAmount ).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { return $1 + ","; }).replace(/\.$/, "")

  104.              this.applicationList.push(response.rows[i]);

  105.              this.applicationListSecond.push(response.rows[i]);

  106.            }

  107.            if(this.applicationList.length >= response.total){

  108.              this.finished = true;

  109.              return;

  110.            }else{

  111.              this.loading = false;

  112.              this.queryParams.pageNum += 1 ;

  113.            }

  114.          });

  115.        }, 1000);

  116.      },

  117.      getSearchList(){

  118.        this.applicationList = [];

  119.        this.queryParams.pageNum = 1;

  120.        this.getList();

  121.      },

  122.      afterRead(file) {

  123.        // 此时可以自行将文件上传至服务器

  124.        this.uploadFiles1.push(file.file);

  125.          let params1 = new FormData();

  126.          params1.append("tableId", this.projectId);

  127.          params1.append("tableName", "t_contraction_info");

  128.          params1.append("bizPath", "contraction");

  129.          params1.append("fileType", this.projectIndex);

  130.          params1.append("file", file.file);

  131.          commonAttach(params1).then((r1) => {

  132.            this.$notify({ type: 'success', message: '上传成功' });

  133.          })

  134.      },

  135.      openLoader(id,index){

  136.        this.show = true;

  137.        this.projectId = id;

  138.        this.projectIndex = index;

  139.        this.fileList = [];

  140.        let oData1= {

  141.          tableId: id,

  142.          tableName: "t_contraction_info",

  143.          bizPath: "contraction",

  144.          fileType: '',

  145.        }

  146.        attachmentList(oData1).then(res => {

  147.          res.rows.map(r => {

  148.            let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL

  149.            this.fileList.push({"url":baseUrl + r.fileUrl,"file":new File([],r.fileName,{}),"id":r.id})

  150.          })

  151.        })

  152.      },

  153.      /** 删除按钮操作 */

  154.      handleDelete(row,index) {

  155. 

  156.        const ids = row.id || this.ids;

  157. 

  158.        this.$dialog.alert(

  159.          {

  160.            message:'是否确认删除合同信息?',

  161.            title:"警告",

  162.            showCancelButton:true,

  163.            confirmButtonText: "确定",

  164.            cancelButtonText: "取消",

  165.          }

  166.        )

  167.          .then(function () {

  168.            return delInfo(ids);

  169.          })

  170.          .then(() => {

  171.            this.applicationList.splice(index, 1);

  172.            this.$notify({ type: 'success', message: '删除成功' });

  173.          });

  174.      },

  175.      deleteFile1(file){

  176.        console.log(file)

  177.        systemAttachment(file.id).then(res => {

  178.          this.$notify({ type: 'success', message: '删除成功' });

  179.        })

  180.      },

  181.      goAdd(){

  182.        this.$router.push('/sunVillage_info/informationAdd')

  183.      },

  184.    },

  185.  }

  186. </script>

  187. 

  188. <style scoped lang="scss">

  189. .home_wrapper{

  190.     background: #e9e9e9;

  191.     min-height: 100vh;

  192.     width: 100vw;

  193.     .header_main {

  194.         height: 116px;

  195.         background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;

  196.         background-size: 100% 100%;

  197.         position: fixed;

  198.         top: 0;

  199.         left: 0;

  200.         width: 100%;

  201.         font-size: 36px;

  202.         line-height: 116px;

  203.         text-align: center;

  204.         color: #fff;

  205.         position: relative;

  206. 

  207.         .return_btn {

  208.             width: 24px;

  209.             height: 43.2px;

  210.             background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;

  211.             background-size: 20px 36px;

  212.             position: absolute;

  213.             left: 38px;

  214.             top: 36px;

  215.         }

  216. 

  217.         .add_btn {

  218.             width: 56.4px;

  219.             height: 40.8px;

  220.             background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;

  221.             background-size: 47px 34px;

  222.             position: absolute;

  223.             right: 38px;

  224.             top: 36px;

  225.         }

  226.     }

  227.     .search_info{

  228.         padding:20px 23px;

  229.         display: flex;

  230.         .search_block{

  231.         height: 59px;

  232.         width: 535px;

  233.         border-radius: 59px;

  234.         background: #fff;

  235.         display: flex;

  236.         border:2px solid #3494ff;

  237.         padding-right: 35px;

  238.         align-items: center;

  239.         .icon{

  240.             width: 30px;

  241.             height: 30px;

  242.             background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;

  243.             background-size: 100% 100%;

  244.             display: block;

  245.             margin:0 8px 0 26px;

  246.         }

  247.         .ipt{

  248.         flex: 1;

  249.         font-size: 26px;

  250.         background: none;

  251.         border:0 none;

  252.         line-height: 59px;

  253.         }

  254.         }

  255.         .total{

  256.         flex: 1;

  257.         display: flex;

  258.         align-items: center;

  259.         justify-content: center;

  260.         font-size: 26px;

  261.         color: #858585;

  262.         }

  263.     }

  264.     .list_main{

  265.         padding:0 22px;

  266.         .item{

  267.             height: 207px;

  268.             border-radius: 30px;

  269.             background: #fff;

  270.             box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  271.             margin-bottom: 20px;

  272.             .item_box{

  273.               padding:25px 32px;

  274.             }

  275.             .head_block{

  276.                 height: 56px;

  277.                 display: flex;

  278.                 align-items: center;

  279.                 width: 100%;

  280.                  .icon{

  281.                     width: 34px;

  282.                     height: 30px;

  283.                     background: url('../../assets/images/sunVillage_info/fixedAssets_icon_2.png') no-repeat;

  284.                     background-size: 100% 100%;

  285.                     display: block;

  286.                     margin-right: 12px;

  287.                 }

  288.                 .title{

  289.                     flex:1;

  290.                     font-size: 32px;

  291.                     color: #252525;

  292.                     overflow: hidden;

  293.                     text-overflow: ellipsis;

  294.                     white-space: nowrap;

  295.                     padding-right: 20px;

  296. 

  297.                 }

  298.             }

  299.             .order_block{

  300.                 height: 50px;

  301.                 display: flex;

  302.                 align-items: center;

  303.                 width: 100%;

  304.                 .order{

  305.                     flex: 1;

  306.                     font-size: 26px;

  307.                     color: #252525;

  308.                 }

  309.                 .describe{

  310.                     font-size: 26px;

  311.                     display: flex;

  312.                     align-items: center;

  313.                     &.suspend{

  314.                         color: #f69600;

  315.                         .icon{

  316.                             width: 27px;

  317.                             height: 26px;

  318.                             background: url('../../assets/images/sunVillage_info/information_icon_1.png') no-repeat;

  319.                             background-size: 100% 100%;

  320.                             display: block;

  321.                             margin-left: 15px;

  322.                         }

  323.                     }

  324.                     &.normal{

  325.                         color: #69c100;

  326.                         .icon{

  327.                             width: 32px;

  328.                             height: 26px;

  329.                             background: url('../../assets/images/sunVillage_info/information_icon_2.png') no-repeat;

  330.                             background-size: 100% 100%;

  331.                             display: block;

  332.                             margin-left: 15px;

  333.                         }

  334.                     }

  335.                     &.undo{

  336.                         color: #858585;

  337.                         .icon{

  338.                             width: 27px;

  339.                             height: 26px;

  340.                             background: url('../../assets/images/sunVillage_info/information_icon_3.png') no-repeat;

  341.                             background-size: 100% 100%;

  342.                             display: block;

  343.                             margin-left: 15px;

  344.                         }

  345.                     }

  346. 

  347. 

  348.                 }

  349.             }

  350.             .function_block{

  351.                 height: 50px;

  352.                 display: flex;

  353.                 align-items: center;

  354.                 width: 100%;

  355.                 .value{

  356.                     flex: 1;

  357.                     font-size: 24px;

  358.                     color: #252525;

  359.                     .amount{

  360.                         color: #eb1616;

  361.                     }

  362.                 }

  363.                 .startStop_time{

  364.                     display: flex;

  365.                     align-items: center;

  366.                     .time{

  367.                         display: flex;

  368.                         align-items: center;

  369.                         font-size: 24px;

  370.                         color: #002022;

  371.                         margin-left: 25px;

  372.                         .unim{

  373.                             width: 32px;

  374.                             height: 32px;

  375.                             font-size: 22px;

  376.                             color: #fff;

  377.                             text-align: center;

  378.                             line-height: 32px;

  379.                             border-radius: 6px;

  380.                             margin-right: 8px;

  381.                             &.start{background: #3e7df2;}

  382.                             &.stop{background: #eb1616;}

  383.                         }

  384.                     }

  385.                 }

  386.             }

  387. 

  388. 

  389.         //    <div class="function_block">

  390.         //              <div class="value">合同金额<span class="amount">￥199.00</span></div>

  391.         //              <div class="startStop_time">

  392.         //                 <div class="time"><div class="unim">起</div>2022.05.04</div>

  393.         //                 <div class="time"><div class="unim">起</div>2022.05.04</div>

  394.         //              </div>

  395.         //          </div>

  396. 

  397. 

  398.         }

  399.     }

  400.     .bottom_tips{

  401.         font-size: 24px;

  402.          color: #a7a6a6;

  403.          text-align: center;

  404.          margin-top: 32px;

  405.          background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;

  406.          background-size: 260px 2px;

  407.          .xs{

  408.             padding:0 8px;

  409.             background: #e9e9e9;

  410.          }

  411.     }

  412.     /deep/ .van-swipe-cell__right{

  413.       display: flex;

  414.       align-items: center;

  415.       width: 150PX;

  416.       margin-left: 5PX;

  417.       a,div{

  418.         margin: 0;

  419.         display: flex;

  420.         align-items: center;

  421.         justify-content: center;

  422.         color: #ffffff;

  423.         font-size: 14PX;

  424.         height: 100%;

  425.         flex: 1;

  426.       }

  427.     }

  428. }

  429. </style>