client-eam-v5/src/components/archive/AssetBatchOperationQueue.vue

<template>
  <div style="height: 100%;">
    <div class="grid-container">
      <div class="grid-item-1">
        <table :id="tableId" class="fixed-table table table-striped table-bordered">
          <thead>
            <tr>
              <th style="width: 40px">
                <input
                  v-model="checked"
                  autocomplete="off"
                  type="checkbox"
                  :checked="checked"
                  @change="selectAll()"
                />
              </th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.assetName') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.assetNumber') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.cardNumber') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.ownerDepartment') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.useDepartment') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.type') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.projectName') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.assetCategory') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.originalValue') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.placeOfPlacement') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.aLocationToBePlacedIn') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.startDate') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.user') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.userInput') }}</th>
              <th style="width: 150px">{{ $t('lang.AssetBatchOperationQueue.usageStatus') }}</th>
            </tr>
          </thead>
          <tbody v-if="assetChangeWaitDtos.length > 0">
            <tr 
              v-for="item in assetChangeWaitDtos"
              :key="item.id"
            >
              <td>
                <input
                  autocomplete="off"
                  type="checkbox"
                  name="checkboxinput"
                  :checked="item.checked"
                  @click="item.checked = !item.checked"
                />
              </td>
              <td>{{ item.assetSimpleResponse.name }}</td>
              <td>{{ item.assetSimpleResponse.assetNo }}</td>
              <td>{{ item.assetSimpleResponse.no }}</td>
              <td>{{ item.assetSimpleResponse.clientName }}&nbsp;{{ item.assetSimpleResponse.organizationName }}</td>
              <td>{{ item.assetSimpleResponse.responseClientName }}&nbsp;{{ item.assetSimpleResponse.responseOrganizationName }}</td>
              <td>{{ item.assetSimpleResponse.type }}</td>
              <td>{{ item.assetSimpleResponse.projectItemName }}</td>
              <td>{{ item.assetSimpleResponse.categoryName }}</td>
              <td>{{ item.assetSimpleResponse.orginalValue }}</td>
              <td>{{ item.assetSimpleResponse.savePosition }}</td>
              <td>{{ item.assetSimpleResponse.locationName }}</td>
              <td>{{ item.assetSimpleResponse.depreciationStartDate }}</td>
              <td>{{ item.assetSimpleResponse.useUserName }}</td>
              <td>{{ item.assetSimpleResponse.useUserNameInput }}</td>
              <td>{{ item.assetSimpleResponse.useStatusName }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="grid-item-2">
        <VueBootstrapPagination
          v-if="pagination.last_page > 0"
          :pagination="pagination"
          :callback="getDatas"
                            
          :show-head-and-tail="true"
        />
      </div>
    </div>

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

<script>
import AssetBatchOperationQueueResource from '../../api/asset/AssetBatchOperationQueueResource.js';
import Common from '../../common/Common.js';
import { Uuid } from 'pc-component-v3';





export default {
  components: {
    
  },
  
  props: {
    changeType: {
      type: String,
      default: null,
    },
  },

  data: function () {
    return {
      assetChangeWaitDtos: [],
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 0, // required
      },
      checked: false,
      tableId: Uuid.createUUID(),
      loading: false,
    };
  },

  mounted: function () {
    var _self = this;
    _self.getDatas();
    this.fixedTableHeader();
    this.$nextTick(function () {
      // 可调整表格列宽
      $('#' + _self.tableId).resizableColumns();
    });
  },

  methods: {
    /**
         * 重置分页，然后查询
         */
    resetQuery: function () {
      var _self = this;
      _self.pagination.current_page = 1;
      _self.getDatas();
    },

    /**
         * 调拨经手人框change事件
         */
    userValueChanged: function (newResponsibilityFieldValue) {
      var _self = this;
      this.userFieldValue = newResponsibilityFieldValue;
    },

    /**
         * 全选和反选
         */
    selectAll: function () {
      var _self = this;
      if (_self.checked) {
        for (var i = 0; i < _self.assetChangeWaitDtos.length; i++) {
          _self.assetChangeWaitDtos[i].checked = true;
        }
      } else {
        for (var j = 0; j < _self.assetChangeWaitDtos.length; j++) {
          _self.assetChangeWaitDtos[j].checked = false;
        }
      }
    },

    /**
         * /查询数据
         */
    getDatas: function () {
      var _self = this;
      _self.loading=true;
      var param = {
        range: {
          start:
                        (_self.pagination.current_page - 1) * _self.pagination.per_page,
          length: _self.pagination.per_page,
        },
        changeType: _self.changeType,
      };
      AssetBatchOperationQueueResource.listByCondition(param).then(
        baseRangeResponse => {
          if(baseRangeResponse.errorCode == 0){
            _self.pagination.total = baseRangeResponse.total;
            if (baseRangeResponse.datas) {
              baseRangeResponse.datas.forEach(function (item) {
                item.checked = false;
              });
            }
            _self.assetChangeWaitDtos = baseRangeResponse.datas;
            _self.loading=false;
            if (baseRangeResponse.datas == undefined ||
                baseRangeResponse.datas.length == 0) {
              return;
            }
            _self.pagination.last_page = Math.ceil(
              baseRangeResponse.total / baseRangeResponse.length,
            );
          }else{
            Common.showDialog('提示', baseRangeResponse.errorMessage, 'error');
          }
          _self.fixedTableHeader();
        },
        errorData => {
          _self.loading=false;
          Common.processException(errorData);
        },
      );
    },

    /**
         * 取消转移
         */
    removeAssetChangeWaitDtos: function () {
      var _self = this;

      let waitChangeAssetDtos = [];
      this.assetChangeWaitDtos.forEach(function (item) {
        if (item.checked) {
          waitChangeAssetDtos.push(item);
        }
      });

      if (waitChangeAssetDtos.length < 1) {
        Common.showDialog('提示', '请选择数据后再提交', 'error');
        return;
      }
      _self.loading=true;
      if (waitChangeAssetDtos.length > 0) {
        AssetBatchOperationQueueResource.remove(
          waitChangeAssetDtos,
        ).then(
          baseListResponse => {
            if(baseListResponse.errorCode == 0){
              console.log(baseListResponse);
            }
            _self.checked = false;
            _self.loading=false;
            _self.getDatas();
          },
          errorData => {
            _self.loading=false;
          },
        );
      }
    },

    /**
         * 获取转移资产DTO集合
         */
    getAssetChangeDtos: function () {
      var _self = this;
      let assetChangeDtos = [];

      _self.assetChangeWaitDtos.forEach(function (item) {
        if (item.checked) {
          let assetChangeDto = {
            assetInstanceId: item.assetSimpleResponse.id,
            assetChangeWaitId: item.id,
          };
          assetChangeDtos.push(assetChangeDto);
        }
      });

      return assetChangeDtos;
    },

    /**
         * 冻结表头
         */
    fixedTableHeader: function () {
      let _self = this;
      _self.$nextTick(function () {
        $('#' + _self.tableId).tableFixer({ left: 3, head: true });
      });
    },
  },
};
</script>

<style scoped>
.grid-container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 50px;
    height: 100%;
    width: 100%;
    align-items: end;
}
.grid-item-1 {
    padding-right: 20px;
    overflow: hidden;
    grid-row: 1/2;
    grid-column: 1 / 2;
    height: 100%;
}

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

.fixed-table {
    table-layout: fixed;
    width: 800px !important;
    min-width: 800px !important;
}

table.fixed-table tr {
    height: 40px;
}

table.fixed-table th,
table.fixed-table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>