client-eam-v5/src/components/depreciation/DepreciationDistribution.vue

<template>
  <div>
    <div class="flex-container">
      <div class="flex-header">
        <Navbar
          :title="
            $t('lang.DepreciationDistribution.distributionOfDismantlingTheOld')
          "
          is-go-back="true"
        />
        <div class="form-inline">
          <div class="form-group">
            <label for="projectItem">
              {{ $t("lang.DepreciationDistribution.modeOfDistribution") }}
            </label>
            <select v-model="type" class="form-control">
              <option value="1">
                {{
                  $t("lang.DepreciationDistribution.distributionByDepartment")
                }}
              </option>
              <option value="2">
                {{ $t("lang.DepreciationDistribution.distributionByCategory") }}
              </option>
            </select>
          </div>
          <div v-if="type == 1" class="form-group">
            <label for="projectItem">
              {{ $t("lang.DepreciationDistribution.selectMonth") }}
            </label>
            <select
              v-model="selectedAccountDate"
              class="form-control"
              :value="currentAccountDate"
              @change="
                queryOrganizationDepreciationDistribution(selectedAccountDate)
              "
            >
              <option
                v-for="accountDateDto in accountDateDtos"
                :key="accountDateDto.id"
                :value="accountDateDto.periodDate"
              >
                {{ accountDateDto.periodDate
                }}{{
                  currentAccountDate == accountDateDto.periodDate
                    ? $t("lang.DepreciationDistribution.login")
                    : ""
                }}
              </option>
            </select>
          </div>
          <div v-if="type == 2" class="form-group">
            <label for="projectItem">
              {{ $t("lang.DepreciationDistribution.selectMonth") }}
            </label>
            <select
              v-model="selectedAccountDate"
              class="form-control"
              :value="currentAccountDate"
              @change="
                queryCategoryDepreciationDistribution(selectedAccountDate)
              "
            >
              <option
                v-for="accountDateDto in accountDateDtos"
                :key="accountDateDto.id"
                :value="accountDateDto.periodDate"
              >
                {{ accountDateDto.periodDate
                }}{{
                  currentAccountDate == accountDateDto.periodDate
                    ? $t("lang.DepreciationDistribution.login")
                    : ""
                }}
              </option>
            </select>
          </div>
          <div class="form-group">
            <button type="button" class="btn btn-info" @click="query">
              {{ $t("lang.DepreciationDistribution.query") }}
            </button>
          </div>
        </div>
      </div>
      <div class="flex-content">
        <table class="fixed-table table table-responsive table-bordered">
          <thead v-if="type == 1">
            <tr>
              <td style="width: 50px">
                {{ $t("lang.DepreciationDistribution.serialNumber") }}
              </td>
              <td style="width: 350px">
                {{ $t("lang.DepreciationDistribution.departmentNumber") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.departmentName") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.projectNumber") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.projectName") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.courseNumber") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.courseName") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.depreciation") }}
              </td>
            </tr>
          </thead>
          <tbody v-if="organizationDepreciationdatas.length > 0 && type == 1">
            <tr v-for="(item, index) in organizationDepreciationdatas" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.orgnizaitonNo }}</td>
              <td>{{ item.organizationName }}</td>
              <td>{{ item.projectNo }}</td>
              <td>{{ item.projectName }}</td>
              <td>{{ item.subjectNo }}</td>
              <td>{{ item.subjectName }}</td>
              <td>{{ item.depreciationValue }}</td>
            </tr>
          </tbody>
          <thead v-if="type == 2">
            <tr>
              <td style="width: 50px">
                {{ $t("lang.DepreciationDistribution.serialNumber") }}
              </td>
              <td style="width: 350px">
                {{ $t("lang.DepreciationDistribution.categoryNumber") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.categoryName") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.projectNumber") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.projectName") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.courseNumber") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.courseName") }}
              </td>
              <td style="width: 150px">
                {{ $t("lang.DepreciationDistribution.depreciation") }}
              </td>
            </tr>
          </thead>
          <tbody v-if="categoryDepreciationdatas.length > 0 && type == 2">
            <tr v-for="(item, index) in categoryDepreciationdatas" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.categoryNo }}</td>
              <td>{{ item.categoryName }}</td>
              <td>{{ item.projectNo }}</td>
              <td>{{ item.projectName }}</td>
              <td>{{ item.subjectNo }}</td>
              <td>{{ item.subjectName }}</td>
              <td>{{ item.depreciationValue }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import Common from '../../common/Common.js';

import PeriodResource from '../../api/finance/PeriodResource.js';

export default {

  components: {
    
    
  },
  data: function () {
    return {
      accountDateDtos: [], //账套登录时间dto
      currentAccountDate: '', //当前时间
      selectedAccountDate: '', //选中的时间
      organizationDepreciationdatas: [], //折旧数据（按照部门分配）
      categoryDepreciationdatas: [], //折旧数据（按照资产分类分配）
      type: '1',
    };
  },

  mounted: function () {
    this.queryLoginAccountDate();
    $('.fixed-table').tableFixer({ left: 3, head: true });

    $('.fixed-table').colResizable({
      resizeMode: 'overflow',
      partialRefresh: true,
    });
  },

  methods: {
    query: function () {
      var _self = this;
      if (_self.type == 1) {
        _self.queryOrganizationDepreciationDistribution(
          _self.selectedAccountDate,
        );
      } else {
        _self.queryCategoryDepreciationDistribution(_self.selectedAccountDate);
      }
    },

    /**
     * 获取账套登录时间
     * @return {void}
     */
    queryLoginAccountDate: function () {
      var _self = this;
      PeriodResource.listByAccountDate().then(
        successData => {
          if(successData.errorCode == 0) {
            if(successData.datas) {
              successData.datas.forEach(function (item) {
                item.periodDate = item.beginDate.substring(0, 7);
                if (item.isAccountDate) {
                  _self.currentAccountDate = item.periodDate;
                  _self.selectedAccountDate = item.periodDate;
                }
              });
              _self.accountDateDtos = successData.datas;
              console.log(successData.datas);
              _self.query();
            }
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    /**
     * 查询折旧分配情况(按部门分配)
     * @return {void}
     */
    queryOrganizationDepreciationDistribution: function (selectedAccountDate) {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'AssetDepreciationResource/queryOrganizationDepreciationDistribution',
        ),
        type: 'get',
        dataType: 'json',
        data: {
          selectedAccountDate: selectedAccountDate,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.organizationDepreciationdatas = data;
          _self.fixedTableHeader();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 查询折旧分配情况(按类别分配)
     * @return {void}
     */
    queryCategoryDepreciationDistribution: function (selectedAccountDate) {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'AssetInstanceResource/queryCategoryDepreciationDistribution',
        ),
        type: 'get',
        dataType: 'json',
        data: {
          selectedAccountDate: selectedAccountDate,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.categoryDepreciationdatas = data;
          _self.fixedTableHeader();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

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

<style scoped>
.flex-container {
  display: flex;
  /* 垂直*/
  flex-direction: column;
  width: 100%;
  /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
  height: calc(100vh - 75px);
}

.flex-header {
  height: 200px;
  /*放大缩小比例为0 */
  flex: 0 0 100px;
}

.flex-footer {
  margin-top: 0.8em;
  height: 35px;
  /*放大缩小比例为0 */
  flex: 0 0 35px;
}

.flex-content {
  margin-top: 0.8em;
  flex: 1;
  overflow: scroll;
  width: 100%;
  height: 0;
}
</style>


<style scoped>
.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;
}
.form-inline .form-group label {
  width: 80px;
  text-align: right;
  padding-right: 5px;
}

.form-inline .form-group input,
.form-inline .form-group select {
  width: 200px;
}
</style>