devicesmgt/sgzb-screen/src/components/home/getMaterialsDialog.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="materialReqNo">
            <el-input v-model="formData.materialReqNo" placeholder="请输入领料单号" size="small" clearable filterable></el-input>
          </el-form-item>
          <el-form-item label="单位名称" size="small" prop="materialReqUnitValue">
            <el-select v-model="formData.materialReqUnitValue" placeholder="请选择单位" size="small" clearable filterable @change="handleUnit">
              <el-option
                v-for="item in formData.materialReqUnitList"
                :key="item.unitId"
                :label="item.unitName"
                :value="item.unitId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工程名称" size="small" prop="materialReqProjectValue">
            <el-select v-model="formData.materialReqProjectValue" placeholder="请选择工程名称" size="small" clearable filterable @change="handleProject">
              <el-option
                v-for="item in formData.materialReqProjectList"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectId"
              ></el-option>
            </el-select>
          </el-form-item>
          <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%">
          <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"
            >
          </el-table-column>
        </el-table>

        <Pagination
          v-show="total > 0"
          :total="total"
          :page="queryParams.pageNum"
          :limit="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, getDetails, getUnitList, getProjectList } from '../../api/dialog'

export default {
  name: 'getMaterialsDialog',
  components: {
    Pagination
  },
  data() {
    return {
      open: false,
      material: false, // 领料
      formData: {
        materialReqNo: '',
        materialReqUnitValue: '',
        materialReqProjectValue: '',
        materialReqTypeValue: '',
        materialReqUnitList: [],
        materialReqProjectList: [],
        materialReqTypeList: [],
      },
      tableData: [],
      tableColumn: [
        {
          label: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          label: '出库时间',
          prop: 'materialTime',
          align: 'center'
        },
        {
          label: '设备类型',
          prop: 'typeName',
          align: 'center'
        },
        {
          label: '规格型号',
          prop: 'typeModelName',
          align: 'center'
        },
        {
          label: '出库数量',
          prop: 'num',
          align: 'center'
        },
        {
          label: '设备负责人',
          prop: 'userName',
          align: 'center'
        },
        {
          label: '领料单号',
          prop: 'materialCode',
          align: 'center'
        },
        {
          label: '领料申请单位',
          prop: 'unitName',
          align: 'center'
        },
        {
          label: '领料申请工程',
          prop: 'projectName',
          align: 'center'
        }
      ],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      maType: 1
    };
  },
  created() {
    this.getUnit()
    this.getProject()
    this.getType()
    
  },
  methods: {
    setOpen(params) {
      this.open = params.open,
      this.maType = params.maType,
      this.tableData = []
      setTimeout(() => {
        this.$refs.form.resetFields()
        this.getList()
      }, 100)
    },
    getList() {
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        maType: this.maType,
        materialCode: this.formData.materialReqNo.trim(),
        unitId: this.formData.materialReqUnitValue,
        projectId: this.formData.materialReqProjectValue,
        typeId: this.formData.materialReqTypeValue
      }
      getDetails(params).then(({data}) => {
        this.tableData = data.rows
        this.total = data.total
      })
    },
    getUnit() {
      getUnitList().then(res => {
        this.formData.materialReqUnitList = res.data
      })
    },
    handleUnit(val) {
      this.formData.materialReqUnitValue = val
    },
    getProject() {
      getProjectList().then(res => {
        this.formData.materialReqProjectList = res.data
      })
    },
    handleProject(val) {
      this.formData.materialReqProjectValue = val
    },
    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>