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

<template>
  <div class="container-fluid">
    <div>
      <Navbar
        :title="$t('lang.DataSyncEdit.u8AssetNumberSynchronization')"
        :is-go-back="false"
      />
    </div>

    <ul class="nav nav-tabs">
      <li
        role="presentation"
        :class="{'active': step == 1}"
        @click="showU8AssetPage"
      >
        <a href="javascript:void(0);">{{ $t('lang.DataSyncEdit.assetsToBeAdded') }}</a>
      </li>
      <li
        role="presentation"
        :class="{'active': step == 2}"
        @click="showProdogAssetPage"
      >
        <a href="javascript:void(0);">{{ $t('lang.DataSyncEdit.prodogUnnumberedAssets') }}</a>
      </li>
    </ul>

    <div
      v-show="step == 1"
      class="row div-content"
    >
      <button
        type="button"
        class="btn btn-primary btn-block"
        @click="getU8Asset"
      >
        {{ $t('lang.DataSyncEdit.refresh') }}
      </button>
      <h5 />
      <div ref="table1" />
    </div>
    <div
      v-show="step == 2"
      class="row div-content"
    >
      <div class="row">
        <div class="col-md-6">
          <button
            type="button"
            class="btn btn-primary btn-block"
            @click="getProdogNoAssetNoData"
          >
            {{ $t('lang.DataSyncEdit.refresh') }}
          </button>
        </div>
        <div class="col-md-6">
          <button
            type="button"
            class="btn btn-success btn-block"
            @click="save"
          >
            {{ $t('lang.DataSyncEdit.save') }}
          </button>
        </div>
      </div>

      <h5 />
      <div ref="table2" />
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../../common/Common.js';



import { Notify } from 'pc-component-v3';
import DynamicJsLoader from '../../common/DynamicJsLoader.js';

export default {

  components: {
  },
  
  data: function () {
    return {
      U8SyncItems: [],
      adds: [],
      updates: [],
      processAllAdds: true,
      processAllUpdates: true,
      root: 'test-hot',
      step: 1,
      loading: false,
    };
  },

  watch: {
    processAllAdds: function (to) {
      this.adds.forEach(function (item) {
        item.isDispose = to;
      });
    },

    processAllUpdates: function (to) {
      this.updates.forEach(function (item) {
        item.isDispose = to;
      });
    },
  },

  mounted: function () {
    this.getU8Asset();
  },
  methods: {
    /**
         * 显示U8资产界面
         */
    showU8AssetPage: function () {
      this.step = 1;
    },

    /**
         * 显示Prodog资产界面
         */
    showProdogAssetPage: function () {
      this.step = 2;
      this.getProdogNoAssetNoData();
    },

    /**
         * 获取u8资产数据
         */
    getU8Asset: function () {
      var _self = this;
      _self.loading=true;
      $.ajax({
        url: Common.getApiURL('dataSyncResource/listNeedAddAssetU8'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if (data) {
            _self.showTable1Data(_self.$refs.table1, data);
          }
          _self.loading=false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 获取Prodog无资产编码的数据
         */
    getProdogNoAssetNoData: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('AssetInstanceResource/getNoAssetNo'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if (data) {
            DynamicJsLoader.loadHandsonTable(_self.showTable2Data(_self.$refs.table2, data));
          }
          _self.loading=false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 保存数据
         */
    save: function () {
      var _self = this;
      _self.loading=true;
      var sendData = _self.hotTable2.getSourceData();
      $.ajax({
        url: Common.getApiURL('AssetInstanceResource/saveNoAssetNo'),
        type: 'post',
        data: JSON.stringify(sendData),
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.loading=false;
          Notify.success('成功', '保存成功', true);
          _self.getNoAssetNoData();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 显示U8未同步资产数据
         * @param {Object} container
         * @param {Object} datas
         */
    showTable1Data: function (container, datas) {
      var _self = this;
      if (_self.hotTable1) {
        _self.hotTable1.loadData(datas);
      } else {
        //        _self.hotTable1 = new Handsontable(container, {
        //          data: datas,
        //          rowHeaders: false,
        //          colHeaders: ['资产名称', '资产编号', '规格型号', '部门编号'],
        //          stretchH: 'all',
        //          columnHeaderHeight: 36,
        //          rowHeights: 36,
        //          columns: [{
        //            data: 'name',
        //            type: 'text',
        //          }, {
        //            data: 'assetNo',
        //            type: 'text',
        //          }, {
        //            data: 'type',
        //            type: 'text',
        //          }, {
        //            data: 'deptNum',
        //            type: 'text',
        //          }],
        //        });
      }
    },

    /**
         * 显示Prodog无资产号的数据
         * @param {Object} container
         * @param {Object} datas
         */
    showTable2Data: function (container, datas) {
      var _self = this;
      if (_self.hotTable2) {
        _self.hotTable2.loadData(datas);
      } else {
        //      _self.hotTable2 = new Handsontable(container, {
        //        data: datas,
        //        rowHeaders: false,
        //        colHeaders: ['资产名称', '资产编号', '规格型号', '部门编号'],
        //        stretchH: 'all',
        //        columnHeaderHeight: 36,
        //        rowHeights: 36,
        //        columns: [{
        //          data: 'name',
        //          type: 'text',
        //        }, {
        //          data: 'assetNo',
        //          type: 'text',
        //        }, {
        //          data: 'type',
        //          type: 'text',
        //        }, {
        //          data: 'organizationName',
        //          type: 'text',
        //        }],
        //      });
      }
    },
  },
};
</script>

<style scoped>

.noMargin {
    margin: 0 !important;
}

.div-content {
    margin: 15px 0px;
}

.sync-base-btn {
    margin-bottom: 10px;
}

.table-box {
    max-height: 500px;
    overflow: auto;
    margin-bottom: 15px;
}
td {
    text-align: center;
}

.span-refresh {
    margin: 10px 0px 0px 10px;
}

.div-content {
    margin-top: 10px;
}
</style>