devicesmgt/sgzb-screen/src/components/home/scrapAnalysisDialog.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="scrapCode">
            <el-input v-model="formData.scrapCode" placeholder="请输入领料单号" size="small" clearable filterable></el-input>
          </el-form-item>
          <el-form-item label="报废来源" size="small" prop="scrapSource">
            <el-select v-model="formData.scrapSource" placeholder="请选择报废来源" size="small" clearable filterable @change="handleSource">
              <el-option
                v-for="item in formData.scrapSourceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="处置状态" size="small" prop="scrapStatus">
            <el-select v-model="formData.scrapStatus" placeholder="请选择处置状态" size="small" clearable filterable @change="handleStatus">
              <el-option
                v-for="item in formData.scrapStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></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%" 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-column
            label="处置状态"
            prop="statusName"
            align="center"
            >
            <template slot-scope="scope">
              <el-tag :type="tagType(scope.row.scrapStatus)">{{ scope.row.statusName }}</el-tag>
            </template>
          </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, getScrapAnalysis } from '../../api/dialog'

export default {
  name: 'getMaterialsDialog',
  components: {
    Pagination
  },
  data() {
    return {
      open: false,
      formData: {
        scrapCode: '',
        scrapSource: '',
        scrapStatus: '',
        materialReqTypeValue: '',
        scrapSourceList: [
          // 1,退料报废 2,维修报废 3,盘点报废
          { value: 1, label: '退料报废' },
          { value: 2, label: '维修报废' },
          { value: 3, label: '盘点报废' }
        ],
        scrapStatusList: [
          // 0进行中，1已审核，2驳回，3待处置，4已处置
          { value: 0, label: '进行中' },
          { value: 1, label: '已审核' },
          { value: 2, label: '驳回' },
          { value: 3, label: '待处置' },
          { value: 4, label: '已处置' }
        ],
        materialReqTypeList: [],
      },
      tableData: [],
      tableColumn: [
        {
          label: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          label: '报废单号',
          prop: 'scrapCode',
          align: 'center'
        },
        {
          label: '报废来源',
          prop: 'scrapSourceName',
          align: 'center'
        },
        {
          label: '报废时间',
          prop: 'scrapTime',
          align: 'center'
        },
        {
          label: '设备类型',
          prop: 'typeName',
          align: 'center'
        },
        {
          label: '规格型号',
          prop: 'typeModelName',
          align: 'center'
        },
        {
          label: '报废数量',
          prop: 'scrapNum',
          align: 'center'
        },
      ],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      maType: 1,
      tagType: (status) => {
        switch (status) {
          case '0':
            return 'primary'
          case '1':
            return 'success'
          case '2':
            return 'danger'
          case '3':
            return 'warning'
          case '4':
            return 'info'
          default:
            return 'primary'
        }
      }
    };
  },
  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()
      }, 100)
    },
    getList() {
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        scrapCode: this.formData.scrapCode.trim(),
        scrapSource: this.formData.scrapSource,
        scrapStatus: this.formData.scrapStatus,
        typeId: this.formData.materialReqTypeValue,
        maType: this.maType
      }
      getScrapAnalysis(params).then(({data}) => {
        this.tableData = data.rows
        this.total = data.total
      })
    },
    handleSource(val) {
      this.formData.scrapSource = val
    },
    handleStatus(val) {
      this.formData.scrapStatus = 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>