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

<template>
  <div class="container-fluid">
    <div>
      <Navbar
        :title="'U8资产同步'"
        :is-go-back="false"
      />
    </div>

    <div>
      <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#base" data-toggle="tab">{{ $t('lang.DataSync.basicDataSynchronization') }}</a></li>
        <li><a href="#add" data-toggle="tab">{{ $t('lang.DataSync.assetCardToBeAdded') }}</a></li>
        <li><a href="#update" data-toggle="tab">{{ $t('lang.DataSync.assetCardToBeUpdated') }}</a></li>
        <span class="badge span-refresh" @click="getAssetU8()">
          <span class="glyphicon glyphicon-refresh" />
        </span>
      </ul>
      <div id="myTabContent" class="tab-content div-content">
        <div id="base" class="tab-pane fade in active">
          <button type="button" class="btn btn-primary btn-block sync-base-btn" @click="syncBase">{{ $t('lang.DataSync.performSynchronization') }}</button>
          <div v-if="U8SyncItems.length > 0" class="table-box">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <td width="50px">{{ $t('lang.DataSync.serialNumber') }}</td>
                  <td width="150px">{{ $t('lang.DataSync.synchronizationItem') }}</td>
                  <td width="150px">{{ $t('lang.DataSync.synchronizationResults') }}</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item, index in U8SyncItems" :key="item.id">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.success?$t('lang.DataSync.success'):$t('lang.DataSync.fail') }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div id="add" class="tab-pane fade">
          <div class="table-box">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <td>{{ $t('lang.DataSync.serialNumber') }}</td>
                  <td>{{ $t('lang.DataSync.assetNumber') }}</td>
                  <td>{{ $t('lang.DataSync.assetName') }}</td>
                  <td>{{ $t('lang.DataSync.type') }}</td>
                  <td>{{ $t('lang.DataSync.departmentNumber') }}</td>
                  <td>
                    <div class="checkbox noMargin">
                      <label><input v-model="processAllAdds" autocomplete="off" type="checkbox" />{{ $t('lang.DataSync.handle') }}</label>
                    </div>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr v-if="adds.length == 0">
                  <td colspan="6">{{ $t('lang.DataSync.noData') }}</td>
                </tr>
                <tr v-for="item, index in adds" v-else :key="item.id">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.assetNo }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.type }}</td>
                  <td>{{ item.deptNum }}</td>
                  <td>
                    <div class="checkbox noMargin">
                      <label><input v-model="item.isDispose" autocomplete="off" type="checkbox" />{{ $t('lang.DataSync.handle') }}</label>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <button type="button" class="btn btn-primary btn-block" @click="syncAdds">{{ $t('lang.DataSync.performSynchronization') }}</button>
        </div>
        <div id="update" class="tab-pane fade">
          <div class="table-box">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <td>{{ $t('lang.DataSync.serialNumber') }}</td>
                  <td>{{ $t('lang.DataSync.assetNumber') }}</td>
                  <td>{{ $t('lang.DataSync.assetName') }}</td>
                  <td>{{ $t('lang.DataSync.type') }}</td>
                  <td>{{ $t('lang.DataSync.departmentNumber') }}</td>
                  <td>
                    <div class="checkbox noMargin">
                      <label><input v-model="processAllUpdates" autocomplete="off" type="checkbox" />{{ $t('lang.DataSync.handle') }}</label>
                    </div>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr v-if="updates.length == 0">
                  <td colspan="6">{{ $t('lang.DataSync.noData') }}</td>
                </tr>
                <tr v-for="item, index in updates" v-else :key="item.id">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.assetNo }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.type }}</td>
                  <td>{{ item.deptNum }}</td>
                  <td>
                    <div class="checkbox noMargin">
                      <label><input v-model="item.isDispose" autocomplete="off" type="checkbox" />{{ $t('lang.DataSync.handle') }}</label>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <button type="button" class="btn btn-primary btn-block" @click="syncUpdates">{{ $t('lang.DataSync.performSynchronization') }}</button>
        </div>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../../common/Common.js';
import { Notify } from 'pc-component-v3';


export default {
  components: {
     
  },
  data : function(){
    return{
      U8SyncItems: [],
      adds: [],
      updates: [],
      processAllAdds: true,
      processAllUpdates: true,
      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.getAssetU8();
  },
  methods: {
    /**
             * 同步基础数据
             */
    syncBase: function(){
      var _self = this;
      _self.loading=true;
      $.ajax({
        url: Common.getApiURL('dataSyncResource/syncBaseItem'),
        type: 'get',
        dataType: 'json',
        beforeSend:function(request){
          Common.addTokenToRequest(request);
        },
        success: function(data){
          _self.U8SyncItems = data;
          _self.loading=false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown){
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

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

    /**
             * 同步新增数据
             */
    syncAdds: function(){
      var _self = this;
      _self.loading=true;
      var datas = new Array();
      _self.adds.forEach(function(item){
        if(item.isDispose){
          datas.push(item);
        }
      });
      if(datas.length == 0){
        _self.loading=false;
        Notify.error('错误', '没有可同步的数据', true);
      }else{
        $.ajax({
          url: Common.getApiURL('dataSyncResource/syncAssetAdd'),
          type: 'post',
          dataType: 'json',
          contentType: 'application/json',
          beforeSend:function(request){
            Common.addTokenToRequest(request);
          },
          data: JSON.stringify(datas),
          success: function(data){
            _self.loading=false;
            Notify.success('成功', '数据同步成功', true);
            _self.getAssetU8();
          },
          error: function (XMLHttpRequest, textStatus, errorThrown){
            _self.loading=false;
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      }
    },

    /**
             * 同步更新数据
             */
    syncUpdates: function(){
      var _self = this;
      _self.loading=true;
      var datas = new Array();
      _self.updates.forEach(function(item){
        if(item.isDispose){
          datas.push(item);
        }
      });
      if(datas.length == 0){
        _self.loading=false;
        Notify.error('错误', '没有可同步的数据', true);
      }else{
        $.ajax({
          url: Common.getApiURL('dataSyncResource/syncAssetUpdate'),
          type: 'post',
          dataType: 'json',
          contentType: 'application/json',
          beforeSend:function(request){
            Common.addTokenToRequest(request);
          },
          data: JSON.stringify(datas),
          success: function(data){
            _self.loading=false;
            Notify.success('成功', '数据同步成功', true);
            _self.getAssetU8();
          },
          error: function (XMLHttpRequest, textStatus, errorThrown){
            _self.loading=false;
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      }
    },

  },
};

</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;
    }
</style>