kd-aiot-frontend/src/views/ledgerAssets/boat/components/baseInfo.vue

<template>
  <div class="baseinfo-container">
    <div class="basic-details-title border-none">
      <span class="border-span">基本信息</span>
    </div>
    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item>
        <template slot="label"> 类别编码 </template>
        {{ information.code }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 舟皿名称 </template>
        {{ information.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 型号</template>
        {{ information.modelType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 规格 </template>
        {{ information.specification }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label"> 分类 </template>
        {{information.categoryLevelPath}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 长/宽/高(mm) </template>
        {{information.extendField.length}}/{{information.extendField.width}}/{{information.extendField.high}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 计量单位</template>
        {{information.measuringUnit}}
      </el-descriptions-item>
    </el-descriptions>
    <div class="basic-details-title border-none">
      <span class="border-span">舟皿明细</span>
    </div>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick" class="basic-tab">
          <el-tab-pane :label="`在用(${countInfo.inUseSum?countInfo.inUseSum:'0'})`" name="inUse" >
          </el-tab-pane>
          <el-tab-pane :label="`在库(${countInfo.inLibrarySum?countInfo.inLibrarySum:'0'})`" name="inLibrary">
          </el-tab-pane>
          <el-tab-pane :label="`消耗(${countInfo.consumeSum?countInfo.consumeSum:'0'})`" name="hasConsume">
          </el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" class="table-box"
         :header-cell-style="{ background: '#F0F3F3', border: 'none'}"
      >
           <el-table-column type="index" label="序号"  width="100"> </el-table-column>
           <el-table-column prop="code" label="编码" > </el-table-column>
           <el-table-column prop="name" label="名称" > </el-table-column>
           <el-table-column prop="inCode" label="入库单号" v-if="activeName=='inLibrary'"> </el-table-column>
           <el-table-column prop="inTime" label="入库时间" v-if="activeName=='inLibrary'"> </el-table-column>
           <el-table-column prop="outCode" label="出库单号" v-if="activeName!='inLibrary'"> </el-table-column>
           <el-table-column prop="outTime" label="出库时间" v-if="activeName!='inLibrary'"> </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[15, 30, 50, 100, 500]"
          :page-size="pagination.size"
          :current-page.sync="pagination.pageNum"
          @current-change="handleCurrent"
          @size-change="handleSize"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getCategoryInfo,
    getPageSingle
  } from '@/api/ledgerAssets/boat.js';
export default {
  props: {
    rowId:{
      type:String ,
      default:''
    },
  },
  data () {
    return {
      information:{
        extendField:{}
      },
      activeName:'inUse',
      tableData:[],
      pagination: {
        pageNum: 1,
        size: 15
      },
      total: 0,
      searchForm:{
        categoryId:this.rowId,
        positionType:1
      },
      countInfo:{}

    }
  },
  created () {
    this.getDetilInfo()
    this.handleList()
    // this.getCountNum()
  },
  methods:{
     getDetilInfo(){
       getCategoryInfo(this.rowId).then(res=>{
          this.information = res.data
          if(res.data.extendField){
            this.$set(this.information, 'extendField', JSON.parse(res.data.extendField))
          }
       })
     },
     tabClick(val){
        switch (this.activeName) {
          case 'inUse': {
            this.searchForm.positionType = 1
            break;
          }
          case 'inLibrary': {
            this.searchForm.positionType = 2
            break;
          }
          case 'hasConsume': {
            this.searchForm.positionType = 3
            break;
          }
          default:
            break;
        }
        this.handleList()
     },

     handleCurrent (page) {
       this.pagination.pageNum = page
       this.handleList()
     },
     handleSize (size) {
       this.pagination.pageNum = 1
       this.pagination.size = size
       this.handleList()
     },

      handleList () {
         const params = {
           ...this.searchForm,
           ...this.pagination
         }
         getPageSingle(params).then(res=>{
            this.tableData = res.list
            this.total = res.count
         })

      },

     getCountNum(){
       const params = {
           assetType:'ZHOUMIN',
           informationId:this.rowInfo.id
       }
       getCount(params).then(res=>{
           if(res?.success){
               this.countInfo = res.data
           }
       })
     }


  },

  watch:{
    // 监听类别id变化
    // rowId() {
    //   this.getDetilInfo()
    // }
  },

}
</script>

<style lang="scss" scoped>
 .baseinfo-container {
    background-color: #fff;
    padding: 20px;
    .content {
      padding: 0 20px;
    }
  .basic-details-title{
    font-size: 16px;
    margin: 15px 0;
  }
  .basic-tab{
    margin-bottom: 15px;
  }
  .upload-container {
    display: flex;
    .img-box {
      width: 280px;
      height: 342px;
      border: 1px solid rgba(215, 215, 215, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        max-width: 100%;
      }
    }
    .file-list {
      margin-left: 50px;
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      justify-items: baseline;
      align-content: flex-start;
      .file-box {
        width: 30%;
        margin-bottom: 20px;
        height: 57px;
        text-align: center;
        line-height: 55px;
        border: 1px solid var(--mainColor);
        color: var(--mainColor);
        cursor: pointer;

        &.disabled {
          cursor: not-allowed;
          border-color: rgba(215, 215, 215, 1);
          color: rgba(215, 215, 215, 1);
        }
      }
    }
  }
}
</style>