devicesmgt/sgzb-screen/src/components/home/inventoryDialog.vue

<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="open"
      width="85%"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="content">
        <el-form :model="formData" ref="form" label-width="80px" :inline="false" size="small" inline>
          <el-form-item label="设备类型" size="small" prop="materialReqTypeValue">
            <el-select v-model="formData.materialReqTypeValue" placeholder="请选择设备类型" size="small" clearable filterable @change="handleType">
              <el-option v-for="item in formData.materialReqTypeList"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column
            v-for="item in tableColumn"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :key="item.prop"
            :align="item.align"
            :type="item.type"
            show-overflow-tooltip
            >
          </el-table-column>
        </el-table>

        <Pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '../Pagination/index.vue'
import { getTypeList, getTotalOwnership } from '../../api/dialog'

export default {
  name: 'inventoryDialog',
  components: {
    Pagination
  },
  data() {
    return {
      open: false,
      formData: {
        materialReqTypeValue: '',
        materialReqTypeList: [],
      },
      tableData: [],
      tableColumn: [
        {
          label: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          label: '设备类型',
          prop: 'typeName',
          align: 'center'
        },
        {
          label: '规格型号',
          prop: 'typeModelName',
          align: 'center'
        },
        {
          label: '单位',
          prop: 'unitName',
          align: 'center'
        },
        {
          label: '在库数量',
          prop: 'stockNum',
          align: 'center'
        },
        {
          label: '在用数量',
          prop: 'useNum',
          align: 'center'
        },
        {
          label: '在修数量',
          prop: 'inRepairNum',
          align: 'center'
        },
        {
          label: '修饰后待入库',
          prop: 'inputNum',
          align: 'center'
        },
        {
          label: '新购待入库',
          prop: 'purchaseNum',
          align: 'center'
        },
        {
          label: '总保有量',
          prop: 'totalOwnershipNum',
          align: 'center'
        },
      ],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      maType: 1
    };
  },
  created() {
    this.getType()
    
  },
  methods: {
    setOpen(params) {
      this.open = params.open,
      this.maType = params.maType,
      this.tableData = []
      this.total = 0
      setTimeout(() => {
        this.$refs.form.resetFields()
        this.getList()
      }, 10)
    },
    getList() {
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        maType: this.maType,
        typeId: this.formData.materialReqTypeValue
      }
      getTotalOwnership(params).then(({data}) => {
        this.tableData = data.rows
        this.total = data.total
      })
    },
    getType() {
      getTypeList({ level: '3' }).then(res => {
        this.formData.materialReqTypeList = res.data
      })
    },
    handleType(val) {
      this.formData.materialReqTypeValue = val
    },
    handleSearch() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleReset() {
      this.$refs.form.resetFields()
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .content{
    padding: 20px;
  }
</style>