kd-aiot-frontend/src/views/ledgerAssets/turnoverCar/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>
        {{ info.code }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 名称 </template>
        {{ info.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 材质</template>
        {{ info.category.extendField && JSON.parse(info.category.extendField).texture }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 型号 </template>
        {{info.category.modelType}}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label"> 分类 </template>
        {{info.category.categoryLevelPath}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 采购日期 </template>
       <!-- {{info.warehouseDetail.procurementTime}} -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 过保日期</template>
        <!-- {{info.warehouseDetail.expirationTime}} -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 计量单位</template>
        {{info.category.measuringUnit}}
      </el-descriptions-item>
     <el-descriptions-item>
        <template slot="label"> 生命周期</template>
       <!-- <div v-if="queryInfo.source==1" style="color: #70B603">在用</div>
        <div v-if="queryInfo.source==2" style="color: #F59A23">在库</div>
        <div v-if="queryInfo.source==3" style="color: #AAAAAA">消耗</div> -->
      </el-descriptions-item>
    </el-descriptions>

    <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>
        {{info.fixCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 品牌 </template>
        {{info.brand}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 供应商</template>
        {{info.supplierName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 供应商电话 </template>
        {{info.supplierMobile}}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label"> {{queryInfo.source==2?'入库单号':'出库单号'}} </template>
        <!-- <el-link style="color: #70B603" @click="jumpDetails">{{info.warehouseDetail.bizNum}}</el-link> -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 所在部门 </template>
        {{info.ownershipDeptName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 所在工序</template>
        {{info.processName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 权属部门 </template>
        {{info.ownershipDeptName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 当前权属人</template>
        {{info.ownershipUserName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 权属人电话</template>
        {{info.ownershipUserMobile}}
      </el-descriptions-item>
    </el-descriptions>
    <div class="basic-details-title border-none">
      <span class="border-span">图文信息</span>
    </div>
<!--   <div class="upload-container">
       <div class="img-box">
         <img
           src="~@/assets/upload-placeholder.svg"
           alt=""
           v-if="!imageUrl"
         />
         <img v-else :src="imageUrl" alt="周转车图片" />
       </div>
    </div> -->
    <div class="basic-details-title border-none">
      <span class="border-span">扩展信息</span>
    </div>
    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item
        v-for="(item, index) in info.extInfoSelf"
        :key="index"
        :span="1"
      >
        <template slot="label"> {{ item.key }} </template>
        <div>{{item.value}}</div>
      </el-descriptions-item>
    </el-descriptions>

 <!--   <DetailsDialog
      ref="detailsDialogRef"
    /> -->
  </div>
</template>

<script>
// import {getAssetInfo} from "@/api/ledgerAssets/asset"
// import DetailsDialog from '@/views/ledgerAssets/components/outstoreDetailsDialog.vue'
// import { imageView } from "@/utils"
  import {
    getAssetInfo
  } from '@/api/ledgerAssets';
  import {
    getDetails
  } from '@/api/classifyManage/itemInformation';
export default {
  props: {
    rowId:{
      type:String ,
      default:''
    },
  },
  // components: { DetailsDialog },
  data () {
    return {
      info:{
        category:{},
        extInfoSelf:[]
      },
      // 设备图片
      imageUrl: "",
      queryInfo:{}

    }
  },
  created () {
     // let id = this.queryInfo.id
     this.getDetilInfo()
  },
  methods:{
     async getDetilInfo(){
       const res = await getAssetInfo(this.rowId)
       if (res){
          this.info = res.data
          this.$set(this.info, 'category', res.data.category)
          this.$set(this.info, 'extInfoSelf', res.data.extInfoSelf?res.data.extInfoSelf:[])
          // this.$set(this.info, 'warehouseDetail', res.data.warehouseDetail)
          // if (res.data.imageUrl) {
          //   imageView(res.data.imageUrl).then((res) => {
          //     this.imageUrl = res;
          //   });
          // }
       }
     },
     // 打开详情弹窗
     jumpDetails(){
       if(!this.info.warehouseDetail){
         return
       }
        this.$refs.detailsDialogRef.init(this.info.warehouseDetail,this.queryInfo.source)
     }




  }
}
</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;
  }
  .upload-container {
    width:100%;
    display: flex;
    align-items:center;
    justify-content:center;
    .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%;
      }
    }
  }
}
</style>