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.loading = false;
            _self.pagination.total = baseRangeResponse.total;
            if (baseRangeResponse.datas && baseRangeResponse.datas.length > 0) {
              baseRangeResponse.datas.forEach(function (item) {
                item.checked = false;
              });
              _self.assetChangeWaitDtos = baseRangeResponse.datas;
              _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>