client-eam-v5/src/components/customer/InventoryDataProcessing.vue

<template>
  <div class="grid-container">
    <div class="grid-item-1">
      <div v-if="pageInformation.showPage != 1">
        <Navbar :title="$t('lang.AssetInventory.inventoryDataProcessing')" :is-go-back="false" />
      </div>
      <div id="step-container" style="margin-top: 20px;">
        <section v-if="pageInformation.showPage != 1">
          <a-steps :current="pageInformation.currentStep">
            <a-step title="选择处理盘点数据类型" />
            <a-step title="处理盘点数据" />
          </a-steps>
        </section>
      </div>
      <a-divider v-if="pageInformation.showPage != 1" />
      <section>
        <inventory-data-processing-step1 v-if="pageInformation.showPage == 0" :current-step="pageInformation" @next="nextStep" />
        <inventory-data-processing-step2 v-if="pageInformation.showPage == 1" :current-step="pageInformation" @previous="previousStep" />
        <inventory-data-processing-step3 v-if="pageInformation.showPage == 2" :current-step="pageInformation" @next="nextStep" @previous="previousStep" />
        <inventory-data-processing-step4 v-if="pageInformation.showPage == 3" :current-step="pageInformation" @next="nextStep" @previous="previousStep" />
      </section>
    </div>
  </div>
</template>

<script>

import InventoryDataProcessingStep1 from './InventoryDataProcessingStep1.vue';
import InventoryDataProcessingStep2 from './InventoryDataProcessingStep2.vue';
import InventoryDataProcessingStep3 from './InventoryDataProcessingStep3.vue';
import InventoryDataProcessingStep4 from './InventoryDataProcessingStep4.vue';

export default {

  components: {
    
    'inventory-data-processing-step1': InventoryDataProcessingStep1,
    'inventory-data-processing-step2': InventoryDataProcessingStep2,
    'inventory-data-processing-step3': InventoryDataProcessingStep3,
    'inventory-data-processing-step4': InventoryDataProcessingStep4,

  },
  data: function() {
    return {
      pageInformation:{
        currentStep: 0,
        showPage: 0,
        assetInventoryStep3: undefined,
      },
    };
  },

  methods: {
    nextStep: function(data) {
      var _self = this;
      _self.pageInformation = data;
      Object.assign(this.pageInformation, data);
    },
    previousStep: function(data) {
      var _self = this;
      _self.pageInformation = data;
    },
    /**
     * 修改数据
     */
    update: function (pageInformation) {
      Object.assign(this.pageInformation, pageInformation);
    },

    mounted: function() {

    },
  },
};
</script>
<style scoped>
  .grid-container {
    display: grid;
    grid-template-rows: 8% 8% 84%;
    grid-template-columns: 100%;
    width: 100%;
    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
    height: calc(100vh - 130px);
  }

  .grid-item-1 {
    grid-row: 1/2;
  }

  .grid-item-2 {
    grid-row: 2/3;
  }

  .grid-item-3 {
    grid-row: 3/4;
  }

  .box {
    border: 1px #ccc solid;
    margin-bottom: 15px;
    padding-top: 10px;
    border-radius: 5px;
    background-color: #ffffff;
  }

  .label {
    float: left;
  }

  .div-form {
    margin-bottom: 10px;
  }
  #step-container{
    margin: 0 !important;
  }
  .ant-divider-horizontal {
    margin: 8px 0;
  }

</style>