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.compareResultList" ref="table" :header-cell-style="{ background: '#dcdfe6' }">
            <el-table-column prop="assetName" label="资产名称"> </el-table-column>
            <el-table-column prop="location" label="资产位置"> </el-table-column>
            <el-table-column prop="category" label="类别"> </el-table-column>
            <el-table-column prop="nowQuantity" label="账面数量变化"> </el-table-column>
            <el-table-column prop="invQuantity" label="实点数量变化"> </el-table-column>
            <el-table-column prop="lossQuantity" 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="deptName" label="盘点部门"> </el-table-column>
      <el-table-column prop="lastSecondDate" label="最后第二次盘点日期"> </el-table-column>
      <el-table-column prop="lastFirstDate" 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.data(
          // this.total = response.total;
          '资产报表',
          this.lossData
        )
      })
    },
    onLossExport() {
      if (this.queryParams.deptId === null) {
        this.$modal.msgWarning('部门不能为空')
        return
      }
      const deptId = this.queryParams.deptId
      this.download('inventory/inventory/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>