rfid-tool/ruoyi-ui/src/views/inventory/statement/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams"  ref="queryForm" class="queryForm" size="small" :inline="true"  label-width="68px">
      <el-form-item label="盘点部门" prop="inventoryDepartment">
        <treeselect
          v-model="queryParams.deptId"
          :options="deptOptions"
          placeholder="选择盘点部门"
          @keyup.enter.native="onQueryLoss"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="onQueryLoss">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="onLossExport"
        v-hasPermi="['inventory:inventory:export']"
      >导出</el-button>
    </el-row>

    <el-table :data="lossList">
      <el-table-column type="expand">
        <template v-slot="slot">
          <el-table :data="slot.row.assetResultList" ref="table" :header-cell-style="{ background: '#dcdfe6' }" >
            <el-table-column
              prop="inventoryName"
              label="资产名称">
            </el-table-column>
            <el-table-column
              prop="inventoryLocationName"
              label="资产位置">
            </el-table-column>
            <el-table-column
              prop="expectInventoryNumber"
              label="账面数量">
            </el-table-column>
            <el-table-column
              prop="realityInventoryNumber"
              label="实点数量">
            </el-table-column>
            <el-table-column
              prop="lossNumber"
              label="损耗数量">
            </el-table-column>
            <el-table-column
              prop="units"
              label="计量单位">
            </el-table-column>
            <el-table-column
              prop="lossVal"
              label="资产损耗金额">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="inventoryDepartment"
        label="盘点部门">
      </el-table-column>
      <el-table-column
        prop="lossTotal"
        label="损耗总额">
      </el-table-column>
      <el-table-column
        prop="date"
        label="盘点时间">
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="onQueryLoss"
    />
  </div>

</template>

<script>
import { deptTreeSelect } from '@/api/system/user.js'
import { getDepAssetLossTb } from '@/api/inventory/detail';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components : {
    Treeselect
  },
  data() {
    return {
      // 总条数
      total: 0,
      lossList: [],
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: null
      }
    }
  },
  created() {
    this.getDeptTree()
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        this.queryParams.deptId = this.deptOptions[0].id;
        this.onQueryLoss()
      });
    },
    onQueryLoss() {
      if (this.queryParams.deptId === null) {
        this.$modal.msgWarning("部门不能为空");
        return
      }
      getDepAssetLossTb(this.queryParams).then(response => {
        this.lossList = response.rows
        this.total = response.total;
        console.log('资产报表', this.lossData)
      })
    },
    onLossExport() {
      if (this.queryParams.deptId === null) {
        this.$modal.msgWarning("部门不能为空");
        return
      }
      const deptId = this.queryParams.deptId
      this.download('inventory/detail/exportDepAssetLossTb', {
        deptId
      }, `资产报表_${new Date().getTime()}.xlsx`)
      this.openExport = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .vue-treeselect {
  display: inline-block;
}
.queryForm {
  /deep/ .vue-treeselect {
    width: 205px;
    height: 32px;
  }
}
.clickNumber{
  color: #409EFF;

  &:hover{
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>