modernDairy/src/views/asset/standardAssetAllocation/index.vue

<template>
  <div class="app-container">
    <div v-if="isPercentage" class="percentage" style="width: 210px;height: 90px;background: #fff;position: fixed;bottom: 0;left: 0;z-index: 9999999999999;">
      <h4 style="padding-left: 10px;line-height: 0;">导出进度:</h4>
      <el-progress style="padding-left: 10px;" :text-inside="true" :stroke-width="26" :percentage="percentage" />
    </div>
    <div class="filter-container">
      <el-select v-model="getdataListParm.parammaps.pastureName" placeholder="牧场" class="filter-item" style="width: 120px;" @change="changePastureName">
        <el-option v-for="item in findAllPasture" :key="item.id" :label="item.name" :value="item.name" />
      </el-select>
      <el-select v-model="getdataListParm.parammaps.departmentId" clearable placeholder="部门" class="filter-item" style="width: 120px;">
        <el-option v-for="item in findAllDepart" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <tree-select
        v-model="getdataListParm.parammaps.eqClassId"
        class="typeSelect"
        :height="150"
        :width="250"
        size="small"
        :data="parentClass"
        :default-props="defaultProps"
        :node-key="nodeKey"
        :disabled="disabled"
        :checked-keys="defaultCheckedKeys"
        :placeholder="placeholder"
        style="display: inline-block;top: 0;"
        @popoverHide="popoverHide"
      />
      <!-- <tree-select
      v-model="getdataListParm.parammaps.eqClassId"
        class="typeSelect"
        :height="150"
        :width="250"
        size="small"
        clearable
        :data="parentClass"
        :disabled="disabled"
        :placeholder="placeholder"
        style="display:inline-block;"
        :default-props="defaultProps"
        :node-key="nodeKey"
        :checked-keys="defaultCheckedKeys"
        @popoverHide="popoverHide"
      /> -->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="form_search">搜索</el-button>
      <el-button class="filter-item" type="success" icon="el-icon-download" @click="handleDownload">导出</el-button>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="tableCellStyle"
        class="elTable"
        show-summary
        :max-height="myHeight"
      >
        <el-table-column label="序号" align="center" type="index" width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + (pageNum-1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="牧场" align="center" prop="name" />
        <el-table-column label="部门" align="center" prop="deapartmentName" />
        <el-table-column label="设备类别" min-width="70px" align="center">
          <template slot-scope="{row}">
            <a @click="clickEquipmentCategory(row)">{{ row.partClassName }}</a>
          </template>
        </el-table-column>
        <el-table-column label="资产标准数量" align="center" prop="equipmentNumber" />
        <el-table-column label="实际数量" align="center" prop="realNumber" />
        <el-table-column label="差异" align="center" prop="differences" />
      </el-table>
      <pagination v-show="total>=0" :total="total" :page.sync="getdataListParm.offset" :limit.sync="getdataListParm.pagecount" @pagination="get_table_data" />
    </div>
  </div>
</template>

<script>
// 引入
import { GetDataByName, GetDataByNames, getRecuData, GetAccount } from '@/api/common'
import waves from '@/directive/waves'
import { json2excel } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
import TreeSelect from '@/components/TreeSelect'
import Cookies from 'js-cookie'
export default {
  name: 'StandardAssetAllocation',
  components: { Pagination, TreeSelect },
  directives: { waves },
  data() {
    return {
      findAllPasture: [], findAllDepart: [],
      requestParams: [
        { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }},
        { name: 'getPastureRoleList', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid'), empId: this.$store.state.user.employeid }}
      ],
      getDepartParam: { name: 'findAllDepart1', offset: 0, pagecount: 0, parammaps: { 'pastureId': Cookies.get('pastureid'), 'eId': Cookies.get('employeid') }},
      disabled: false, placeholder: '请选择设备类别',
      nodeKey: 'id',
      defaultCheckedKeys: [],
      parentClass: [],
      defaultProps: { children: 'children', label: 'typeName' },
      getRecuListParm: { name: 'getAssetTypeList', idname: 'id', params: [-1] },
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      getdataListParm: {
        name: 'getEquipmentAndEquipmentStandard', page: 1, offset: 1, pagecount: 10, returntype: 'Map',
        parammaps: { pastureId: Cookies.get('pastureid'), pastureName: Cookies.get('pasturename'), departmentName: '', eqClassId: '' }
      },
      requestParam: { name: 'insertAsset', offset: 0, pagecount: 0, parammaps: {}}, statueReason: false,
      downLoadParm: {},
      downLoadList: [],
      pageNum: 0,
      pageSize: 0,
      isPercentage: false,
      percentage: 1,
      isokDisable: false,
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      myHeight: document.documentElement.clientHeight - 85 - 150
    }
  },
  created() {
    this.get_select_list()
    this.get_table_data()
    this.getDownClassList()
  },
  methods: {
    get_select_list() {
      GetDataByNames(this.requestParams).then(response => {
        if (response.data.list !== null) {
          this.findAllPasture = response.data.getPastureRoleList.list // response.data.findAllPasture.list
          this.getDepartDownList()
        }
      })
    },
    getDepartDownList() {
      GetDataByName(this.getDepartParam).then(response => {
        this.findAllDepart = response.data.list
      })
    },
    changePastureName(item) {
      this.getDepartParam.parammaps.pastureId = this.findAllPasture.find(obj => obj.name == item).id
      this.getdataListParm.parammaps.departmentId = ''
      this.getDepartDownList()
    },
    get_table_data() {
      this.listLoading = true
      if (this.getdataListParm.parammaps.pastureName == '现代牧业') {
        // this.getdataListParm.parammaps.pastureName = ''
        this.getdataListParm.parammaps.pastureId = ''
      }
      GetDataByName(this.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.list = response.data.list
          this.pageNum = response.data.pageNum
          this.pageSize = response.data.pageSize
        } else {
          this.list = []
        }
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    form_search() {
      this.listLoading = true
      this.getdataListParm.offset = 1
      this.getdataListParm.parammaps.pastureId = this.findAllPasture.find(obj => obj.name == this.getdataListParm.parammaps.pastureName).id
      this.get_table_data()
    },

    popoverHide(checkedIds, checkedData) {
      console.log(checkedIds, checkedData)
      if (checkedData.children === undefined) {
        this.getdataListParm.parammaps.eqClassId = checkedData.eqClassId
      } else {
        this.defaultCheckedKeys = []
        this.$message({ type: 'warning', message: '请选择具体设备类型' })
      }
    },
    getDownClassList() {
      getRecuData(this.getRecuListParm).then(response => {
        this.parentClass = response.data
      })
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3) {
        return {
          textDecoration: 'underline'
        }
      }
      return {
        textDecoration: 'none'
      }
    },
    clickEquipmentCategory(row) {
      console.log('跳转了')
      if (Cookies.get('pasturename') == '现代牧业') {
        this.$router.push({ path: '/asset/basics', query: { myPath: 'AssetStandardManagement', pastureName: row.name, pastureId: row.pastureId, departmentId: parseInt(row.departmentId), eqClassId: row.eqClassId }})
        this.getdataListParm.parammaps.pastureName = row.name
        this.getdataListParm.parammaps.pastureId = row.pastureId
        this.getdataListParm.parammaps.departmentId = row.departmentId
        this.getdataListParm.parammaps.eqClassId = row.eqClassId
        this.getdataListParm.parammaps.eqClassName = row.eqClassName
      } else {
        if (row.name == Cookies.get('pasturename')) {
          this.$router.push({ path: '/asset/basics', query: { myPath: 'AssetStandardManagement', pastureName: row.name, pastureId: row.pastureId, departmentId: parseInt(row.departmentId), eqClassId: row.eqClassId }})
          this.getdataListParm.parammaps.pastureName = row.name
          this.getdataListParm.parammaps.pastureId = row.pastureId
          this.getdataListParm.parammaps.departmentId = row.departmentId
          this.getdataListParm.parammaps.eqClassId = row.eqClassId
          this.getdataListParm.parammaps.eqClassName = row.eqClassName
        } else {
          this.$message({ type: 'error', message: '请联系管理员开通相关牧场数据权限' })
        }
      }
    },

    handleDownload() {
      this.$alert('设备基础信息正在导出中，请勿刷新或离开本页面，若导出时间过长，建议缩小导出数据范围重新导出', {})
      this.isPercentage = true
      this.percentage = 1
      var timer = setInterval(() => {
        this.percentage += 5
        if (this.percentage > 95) {
          this.percentage = 99
          clearInterval(timer)
        }
        this.percentage = this.percentage
      }, 1000)
      this.downLoadParm.name = 'getAssetList'
      this.downLoadParm.parammaps = this.getdataListParm.parammaps
      GetAccount(this.downLoadParm).then(response => {
        this.downLoadList = response.data.list
        if (response.data.list !== '') {
          this.percentage = 99
          setTimeout(() => {
            this.isPercentage = false
          }, 2000)
        }
        console.log(this.downLoadList)
        const elecExcelDatas = [
          {
            tHeader: ['设备类别', '资产编号', '设备名称', '设备内部编号', '设备规格', '品牌', '供应商', '用途', '状态', '购置日期', '入场日期', '折旧年限', '财务编号', '原值', '残值', '月核减值', '保养级别', '保养费用', '维修费用', '基数(小时)', '牧场', '部门', '责任人', '录入人', '录入时间', '折旧年限', '使用时长(年)', '使用率(%)'],
            filterVal: ['eqClassName', 'assetCode', 'eqName', 'eqCode', 'specification', 'brandName', 'providerName', 'purpose', 'status', 'purchaseDate', 'entranceDate', 'depreciation', 'financeCode', 'yuanzhi', 'salvage', 'subtractvalue', 'upkeepgrade', 'yearUpkeepCost', 'yearMaintainCost', 'baseHours', 'pastureName', 'deptName', 'employeName', 'inputUserName', 'inputDatetime', 'depreciation', 'serviceDuration', 'utilizationRate'],
            tableDatas: this.downLoadList,
            sheetName: '设备基础信息'
          }
        ]
        json2excel(elecExcelDatas, '设备基础信息', true, 'xlsx')
      })
    }

  }
}
</script>
<style lang="scss" scoped>
  .el-autocomplete-suggestion li{
    padding:0 3px!important;
  }
  .el-table .warning-row {
      background: oldlace;
  }
  .el-table .success-row {
      background: #f0f9eb;
  }
</style>
<style lang="scss">
  .upkeepgrade .el-form-item__label{
    line-height: 20px;
  }
  .inputDatetime .el-range-separator{
   padding: 0;
   margin: 0 10px;
  }
  .el-radio__label{
    padding-left: 2px !important;
  }
  .typeSelect span .el-popover__reference .el-input--suffix {
    top:-3px;
    .el-input__inner{
      height:40px !important;
    }
  }
</style>