|
|
@@ -0,0 +1,243 @@
|
|
|
+<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>
|