kd-aiot-frontend/src/views/classifyManage/itemInformation/details.vue

<template>
  <div class="content-height p20">
    <div class="page-title">
      <el-page-header @back="goBack">
        <div slot="content" class="pageContent">
          <div>物品详情 </div>
          <el-form class="topform">
            <el-form-item label="物品类型" label-width="70px">
              <span>{{ itemValue }}</span>
            </el-form-item>
          </el-form>
        </div>
      </el-page-header>
    </div>
    <div class="table-container">
      <div class="tree-col">
        <ItemDetail ref="itemDetailRef" :customForm="customForm" />
      </div>
      <div class="attribute-row">
        <RowDetail
          ref="rowDetailRef"
          :customForm="customForm"
          :defaultNum="defaultNum"
        />
        <div
          class="row-table"
          v-if="defaultNum != '8' && defaultNum != '2' && defaultNum != '5'"
        >
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane
              label="匹配产品"
              name="product"
              v-if="defaultNum == '3' || defaultNum == '6'"
            >
              <el-table
                :data="productData"
                class="table-box"
                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
              >
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="informationCode" label="物品编码">
                </el-table-column>
                <el-table-column prop="informationName" label="物品名称">
                </el-table-column>
                <el-table-column prop="brandNum" label="牌号">
                </el-table-column>
                <el-table-column prop="modelType" label="型号">
                </el-table-column>
                <el-table-column
                  label="物品类型"
                  prop="classificationCode"
                  :formatter="classificationCodeFormatter"
                >
                </el-table-column>
                <el-table-column prop="classificationUrl" label="分类">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane
              label="匹配模具"
              name="mould"
              v-if="defaultNum == '1' || defaultNum == '4'"
            >
              <el-table
                :data="mouldData"
                class="table-box"
                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
              >
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="informationCode" label="物品编码">
                </el-table-column>
                <el-table-column prop="informationName" label="物品名称">
                </el-table-column>
                <el-table-column prop="brandNum" label="牌号">
                </el-table-column>
                <el-table-column prop="modelType" label="型号">
                </el-table-column>
                <el-table-column
                  label="物品类型"
                  prop="classificationCode"
                  :formatter="classificationCodeFormatter"
                >
                </el-table-column>
                <el-table-column prop="classificationUrl" label="分类">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane
              label="匹配备品备件"
              name="part"
              v-if="defaultNum == '1'"
            >
              <el-table
                :data="partData"
                class="table-box"
                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
              >
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="informationCode" label="物品编码">
                </el-table-column>
                <el-table-column prop="informationName" label="物品名称">
                </el-table-column>
                <el-table-column prop="modelType" label="型号">
                </el-table-column>
                <el-table-column
                  label="物品类型"
                  prop="classificationCode"
                  :formatter="classificationCodeFormatter"
                >
                </el-table-column>
                <el-table-column prop="classificationUrl" label="分类">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="BOM表" name="bom" v-if="defaultNum == '4'">
              <div class="bom-top">
                <div class="top-input">
                  <span>基本数量</span>
                  <div class="input-box">{{ customForm.basicNum }}</div>
                  <span>{{ customForm.measuringUnit }}</span>
                </div>
              </div>
              <el-table
                :data="bomData"
                class="table-box"
                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
              >
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="informationCode" label="物品编码">
                </el-table-column>
                <el-table-column prop="informationName" label="物品名称">
                </el-table-column>
                <el-table-column prop="brandNum" label="牌号">
                </el-table-column>
                <el-table-column
                  label="物品类型"
                  prop="classificationCode"
                  :formatter="classificationCodeFormatter"
                >
                </el-table-column>
                <el-table-column prop="classificationUrl" label="分类">
                </el-table-column>
                <el-table-column prop="num" label="数量"> </el-table-column>
                <el-table-column prop="date" label="计量单位">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane
              label="匹配设备"
              name="facility"
              v-if="defaultNum == '6' || defaultNum == '7'"
            >
              <el-table
                :data="facilityData"
                class="table-box"
                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
              >
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="informationCode" label="物品编码">
                </el-table-column>
                <el-table-column prop="informationName" label="物品名称">
                </el-table-column>
                <el-table-column prop="modelType" label="型号">
                </el-table-column>
                <el-table-column
                  label="物品类型"
                  prop="classificationCode"
                  :formatter="classificationCodeFormatter"
                >
                </el-table-column>
                <el-table-column prop="classificationUrl" label="分类">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!--                   <div class="pagination">
                     <el-pagination
                       background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="pagination.total"
                       :page-sizes="[5, 10, 20, 50, 100]"
                       :page-size="pagination.size"
                       :current-page.sync="pagination.page"
                       @current-change="handleCurrent"
                       @size-change="handleSize"
                     >
                     </el-pagination>
                   </div> -->
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ItemDetail from './components/ItemDetail';
  import RowDetail from './components/RowDetail';
  import { getDetails } from '@/api/classifyManage/itemInformation';
  export default {
    components: { ItemDetail, RowDetail },
    data () {
      return {
        pageTitle: '',
        typeList: [
          { id: 1, value: '1  生产设备', prefix: '1', code: 1 },
          { id: 2, value: '2  舟皿', prefix: '2', code: 2 },
          { id: 3, value: '5  周转车', prefix: '5', code: 5 },
          { id: 4, value: '6  模具', prefix: '6', code: 6 },
          { id: 5, value: '7  备品备件', prefix: '7', code: 7 },
          { id: 6, value: '3  物料', prefix: '3', code: 3 },
          { id: 7, value: '4  产品', prefix: '4', code: 4 },
          { id: 8, value: '8  耗材', prefix: '8', code: 8 }
        ],
        defaultNum: '1',
        // itemForm:{
        //   priceType:0, dateType:0,
        // },
        customForm: {
          addList: []
        },
        activeName: 'product',
        productData: [],
        mouldData: [],
        partData: [],
        bomData: [],
        facilityData: [],
        pagination: {
          page: 1,
          size: 10,
          total: 0
        },
        itemValue: ''
      };
    },
    created () {
      this.getDetilInfo(this.$route.query.id);
    },
    methods: {
      async getDetilInfo (id) {
        const res = await getDetails(id);
        if (res.success) {
          this.customForm = res.data;
          this.defaultNum = res.data.classificationCode;
          this.formatterValue(res.data.classificationCode);
          this.setDefault(res.data.classificationCode);
          for (const key in this.customForm.informationRelationMap) {
            this.matchList(key, this.customForm.informationRelationMap);
          }
        }
      },

      formatterValue (code) {
        this.typeList.map((item) => {
          if (item.prefix == code) {
            this.itemValue = item.value;
          }
        });
      },

      goBack () {
        this.$router.go(-1);
      },
      // 显示默认选中的tab
      setDefault (val) {
        switch (val) {
          case '3': {
            this.activeName = 'product';
            break;
          }
          case '1': {
            this.activeName = 'mould';
            break;
          }
          case '4': {
            this.activeName = 'mould';
            break;
          }
          case '6': {
            this.activeName = 'product';
            break;
          }
          case '7': {
            this.activeName = 'facility';
            break;
          }
          default:
            break;
        }
      },

      matchList (key, data) {
        switch (key) {
          case '1': {
            this.facilityData = data[key];
            break;
          }
          case '6': {
            this.mouldData = data[key];
            break;
          }
          case '7': {
            this.partData = data[key];
            break;
          }
          case '4': {
            this.productData = data[key];
            break;
          }
          case '3': {
            this.bomData = data[key];
            break;
          }
          default:
            break;
        }
      },

      handleDelete (index, row) {},

      //点击添加打开弹窗
      clickAdd () {
        this.$refs.addDialogRef.equipmentdialog = true;
      },

      handleCurrent (page) {
        this.pagination.page = page;
        // this._getList(this.params)
      },
      handleSize (size) {
        this.pagination.page = 1;
        this.pagination.size = size;
        // this._getList(this.params)
      },

      // 物品类型格式化
      classificationCodeFormatter (row) {
        let itemName = '';
        this.typeList.map((item) => {
          if (item.prefix == row.classificationCode) {
            itemName = item.value;
          }
        });
        return itemName;
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.page-title) {
    border-bottom: 1px solid #eaeefb;
    padding-bottom: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    .el-page-header__left {
      display: flex;
      align-items: center;
    }
    .pageContent {
      display: flex;
      align-items: center;
      font-size: 18px;
      color: #303133;
      .topform {
        margin: 5px 0 0 30px;
      }
    }
  }
  .table-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    .tree-col {
      margin-right: 10px;
      width: 25%;
      min-width: 250px;
      overflow: auto;
      padding: 20px 20px 20px 10px;
      background-color: #fff;
      margin-top: 10px;
      border: 1px solid #e6ebf5;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
  }

  :deep(.attribute-row) {
    padding: 20px 5px;
    background: #fff;
    margin-top: 10px;
    overflow: auto;
    flex: 1;
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    position: relative;
    .row-table {
      width: 100%;
      margin: 20px auto 0;
      .table-box {
        width: 100%;
        margin: 10px auto;
        min-height: 400px;
      }
      .bom-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .top-input {
          margin-left: 20px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .input-box {
            width: 150px;
            margin: 0 10px;
            display: inline-box;
          }
        }
      }
    }
    .page-footer-btn {
      background: #fff;
      z-index: 1;
      position: fixed;
      bottom: 40px;
      right: 80px;
      text-align: right;
      width: 50%;
    }
  }
</style>