tft-fe/src/views/consumablesManagement/inAndOutRecords.vue

<template>
  <div class="page-box">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
      @select-changed="selectChanged"
    />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProps"
      :table-data="tableData"
      :max-height="tableH"
    />
    <pagination
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import { getOutInRecordRecord } from '@/api/consumablesManagement'
import { sideLibraryList, materialList } from '@/api/basicConfig'
import moment from 'moment'
import { publicFormatter, timeFormatter } from '@/utils'
const tableProps = [
  {
    prop: 'type',
    label: '类型',
    minWidth: 120,
    filter: publicFormatter('materialVoList')
  },
  {
    prop: 'line',
    label: '产线',
    minWidth: 120
  },
  {
    prop: 'sidelibraryName',
    label: '所属线边库',
    minWidth: 120
  },
  {
    prop: 'materialName',
    label: '耗材名称',
    minWidth: 150
  },
  {
    prop: 'spec',
    label: '规格',
    minWidth: 150
  },
  {
    prop: 'batchCode',
    label: '批次编码',
    minWidth: 140
  },
  {
    prop: 'num',
    label: '数量',
    minWidth: 100
  },
  {
    prop: 'unit',
    label: '单位',
    minWidth: 100
  },
  {
    prop: 'supplier',
    label: '供应商',
    minWidth: 140
  },
  {
    prop: 'recipient',
    label: '领取人',
    minWidth: 140
  },
  {
    prop: 'creatorName',
    label: '登记人',
    minWidth: 140
  },
  {
    prop: 'createTime',
    label: '登记时间',
    filter: timeFormatter,
    minWidth: 160
  },
  {
    prop: 'remark',
    label: '备注',
    minWidth: 150
  }
]
export default {
  name: 'InAndOutRecords',
  data() {
    return {
      activeName: 'stock',
      formConfig: [
        {
          type: 'datePicker',
          label: '登记时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-ddTHH:mm:ss',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'timeVal',
          defaultSelect: [],
          width: 350
        },
        {
          type: 'select',
          label: '类型',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .materialVoList,
          labelField: 'dataName',
          valueField: 'dataCode',
          param: 'type',
          defaultSelect: '',
          width: 100
        },
        {
          type: 'select',
          label: '产线',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .proLineVoList,
          labelField: 'dataName',
          valueField: 'dataName',
          onchange: true,
          param: 'line',
          defaultSelect: '',

          width: 100
        },
        {
          type: 'select',
          label: '线边库名称',
          selectOptions: [],
          param: 'sidelibraryName',
          labelField: 'name',
          valueField: 'name',
          defaultSelect: '',
          width: 180
        },
        {
          type: 'select',
          label: '耗材名称',
          selectOptions: [],
          param: 'materialName',
          labelField: 'name',
          valueField: 'name',
          defaultSelect: '',
          width: 180
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'button',
          btnName: '重置',
          name: 'reset'
        }
      ],
      tableProps,
      tableData: [],
      tableH: tableHeight(275),
      total: 0,
      listQuery: {
        current: 1,
        size: 20
      }
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(275)
    })
    this.formConfig[0].defaultSelect = [
      moment().format('yyyy-MM-DD') + 'T00:00:00',
      moment().format('yyyy-MM-DD') + 'T23:59:59'
    ]
    this.listQuery.startTime = moment().format('yyyy-MM-DD') + 'T00:00:00'
    this.listQuery.endTime = moment().format('yyyy-MM-DD') + 'T23:59:59'
    this.getMaterialList()
    this.getList()
  },
  methods: {
    getList() {
      getOutInRecordRecord({ ...this.listQuery }).then((res) => {
        if (res.code === 0) {
          this.total = res.data.total
          this.tableData = res.data.records
        }
      })
    },
    selectChanged(val) {
      if (val.value) {
        let id = null
        let line = JSON.parse(localStorage.getItem('publicList')).proLineVoList
        line &&
          line.map((item) => {
            if (item.dataName === val.value) {
              id = item.dataCode
            }
          })
        sideLibraryList({ id }).then((res) => {
          if (res.code === 0) {
            this.formConfig[0].defaultSelect =
              this.$refs.searchBarForm.formInline.timeVal
            this.formConfig[3].selectOptions = res.data
            this.formConfig[3].defaultSelect = null
          }
        })
      }
    },
    getMaterialList() {
      materialList().then((res) => {
        if (res.code === 0) {
          this.formConfig[4].selectOptions = res.data
        }
      })
    },
    buttonClick(val) {
      if (val.btnName === 'search') {
        this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
        this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
        this.listQuery.type = val.type
        this.listQuery.line = val.line
        this.listQuery.sidelibraryName = val.sidelibraryName
        this.listQuery.materialName = val.materialName
        this.listQuery.current = 1
        this.getList()
      } else if (val.btnName === 'reset') {
        this.formConfig[0].defaultSelect = []
        this.$refs.searchBarForm.resetForm()
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
        this.listQuery.type = ''
        this.listQuery.line = ''
        this.listQuery.sidelibraryName = ''
        this.listQuery.materialName = ''
        this.getList()
      }
    }
  }
}
</script>