kd-aiot-frontend/src/views/ledgerAssets/sparepart/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.baseInfo.modelType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 规格 </template>
        {{info.baseInfo.specification}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label" :span="2"> 分类 </template>
        {{info.baseInfo.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.baseInfo.measuringUnit}}
      </el-descriptions-item>
      <el-descriptions-item v-if="!info.baseInfo.unpack">
        <template slot="label"> 最小包装单位</template>
        {{info.baseInfo.measuringUnit}}{{info.baseInfo.unit}}/{{info.baseInfo.packingUnit}}
      </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.ownershipDeptName}}
      </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>

    <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 class="file-list">
        <div
          :class="{ disabled: !item.storePath }"
          @click="openfile(item)"
          v-for="(item, index) in fileList"
          :key="index"
          class="file-box"
        >
          {{ item.t_name }}
        </div>
      </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>
  </div>
</template>

<script>
  import { getAssetInfo } from '@/api/ledgerAssets';
  import { getDetails } from '@/api/classifyManage/itemInformation';
  import { getImageUrl } from '@/utils/file.js';
  import { getFile } from '@/api/system/file/index.js';
export default {
  props: {
    rowId:{
      type:String ,
      default:''
    },
  },
  data () {
    return {
      fileList: [
        { t_name: '使用说明书' },
        { t_name: '生产许可证书' },
        { t_name: '防爆合格证书' },
        { t_name: '检验报告' },
        { t_name: '检验周期说明' },
        { t_name: '图纸资料' },
        { t_name: '产品合格证' }
      ],
      info:{
        baseInfo:{},
        extInfoSelf:[],
      },
      // 设备图片
      imageUrl: "",
    }
  },

  created () {
     this.getDetilInfo()
  },
  methods:{
     async getDetilInfo(){
       const res = await getAssetInfo(this.rowId)
       if (res){
          this.info = res
          this.$set(this.info, 'baseInfo', res.category.category)
          this.$set(this.info, 'extInfoSelf', res.extInfoSelf?res.extInfoSelf:[])
          // 设备图片
          if(typeof res.imageUrl !='string' ){
             this.imageUrl  = getImageUrl(res.imageUrl.storePath)
          }
          if (res.attUrl && res.attUrl.length > 0) {
            // 文档信息
            res.attUrl.forEach((item, index) => {
              Object.assign(this.fileList[item.sort - 1], item)
            })
          }
       }
     },

     openfile (row) {
       if (row.storePath) {
         getFile({ objectName: row.storePath }, row.name);
       }
     },




  }
}
</script>

<style lang="scss" scoped>
::v-deep.baseinfo-container {
  background-color: #fff;
  padding: 0 20px 20px;
  .content {
    padding: 0 20px;
  }
  .basic-details-title{
    font-size: 16px;
    margin: 15px 0;
  }
  .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 #1890ff;
        color: #1890ff;
        cursor: pointer;

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