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.useCount ? countInfo.useCount : '0'})`"
          name="inUse"
        >
        </el-tab-pane>
        <el-tab-pane
          :label="`在库(${
            countInfo.libraryCount ? countInfo.libraryCount : '0'
          })`"
          name="inLibrary"
        >
        </el-tab-pane>
        <el-tab-pane
          :label="`消耗(${countInfo.consumeCount ? countInfo.consumeCount : '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 { getPageSingle , getCount } from '@/api/ledgerAssets';
  import { getDetails } from '@/api/classifyManage/itemInformation.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 () {
        getDetails(this.rowId).then((res) => {
          this.information = res;
          if (res.extendField) {
            this.$set(
              this.information,
              'extendField',
              JSON.parse(res.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 = {
          categoryId:  this.rowId
        };
        getCount(params).then((res) => {
          if (res) {
            this.countInfo = res;
          }
        });
      }
    },

    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>