tft-fe/src/views/consumablesManagement/inAndOutManagement.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"
      :row-class-name="tableRowClassName"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="120"
        label="操作"
        fixed="right"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      :total="total"
      @pagination="getList"
    />
    <!-- 入库 -->
    <base-dialog
      :dialogTitle="addAndEdit"
      :dialogVisible="centervisible"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :before-close="handleCancel"
    >
      <in-and-out-management-add
        ref="inAndOutManagementAdd"
        @successSubmit="successSubmit"
      />
    </base-dialog>
  </div>
</template>
<script>
import InAndOutManagementAdd from './components/inAndOutManagementAdd'
import InnerTable from './components/InnerTable'
import { tableHeight } from '@/utils/index'
import {
  getMaterialManagePage,
  outInRecordRecordExport
} from '@/api/consumablesManagement'
import { sideLibraryList, materialList } from '@/api/basicConfig'
const tableProps = [
  {
    prop: 'line',
    label: '产线',
    minWidth: 120
  },
  {
    prop: 'sideLibraryName',
    label: '所属线边库',
    minWidth: 150
  },
  {
    prop: 'materialName',
    label: '耗材名称',
    minWidth: 150
  },
  {
    prop: 'spec',
    label: '规格',
    minWidth: 150
  },
  {
    prop: 'unit',
    label: '单位',
    minWidth: 150
  },
  {
    prop: 'stockNum',
    label: '库存数量/个',
    sortable: true,
    minWidth: 150
  },
  {
    prop: 'details',
    label: '库存详情',
    minWidth: 100,
    subcomponent: InnerTable
  },
  {
    prop: 'minNum',
    label: '最低安全库存',
    width: 150
  },
  {
    prop: 'maxNum',
    label: '最高安全库存',
    width: 150
  },
  {
    prop: 'remark',
    label: '备注',
    minWidth: 150
  }
]
const tableBtn = [
  {
    type: 'edit',
    btnName: '编辑'
  },
  {
    type: 'output',
    btnName: '出库'
  }
]
export default {
  name: 'InAndOutManagement',
  components: { InAndOutManagementAdd },
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '产线',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .proLineVoList,
          param: 'lineName',
          labelField: 'dataName',
          valueField: 'dataName',
          defaultSelect: '',
          onchange: true,
          width: 150
        },
        {
          type: 'select',
          label: '线边库名称',
          selectOptions: [],
          param: 'libraryName',
          labelField: 'name',
          valueField: 'name',
          defaultSelect: '',
          width: 200
        },
        {
          type: 'select',
          label: '耗材名称',
          selectOptions: [],
          param: 'materialName',
          labelField: 'name',
          valueField: 'name',
          defaultSelect: '',
          width: 150
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: 'button',
          btnName: '入库',
          name: 'add',
          color: 'primary',
          plain: true
        },
        {
          type: 'button',
          btnName: '导出',
          name: 'export',
          color: 'primary',
          plain: true
        }
      ],
      tableProps,
      tableData: [],
      tableBtn,
      tableH: tableHeight(275),
      total: 0,
      listQuery: {
        current: 1,
        size: 20
      },
      addAndEdit: '',
      centervisible: false
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(275)
    })
    this.getMaterialList()
    this.getList()
  },
  methods: {
    getList() {
      getMaterialManagePage({ ...this.listQuery }).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.total = res.data.total
          this.tableData = res.data.records
        }
      })
    },
    selectChanged(val) {
      console.log(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[1].selectOptions = res.data
            this.formConfig[1].defaultSelect = null
          }
        })
      }
    },
    getMaterialList() {
      materialList().then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.formConfig[2].selectOptions = res.data
        }
      })
    },
    handleClick(val) {
      console.log(val)
      if (val.type === 'edit') {
        this.centervisible = true
        this.addAndEdit = '编辑'
        const param = { id: val.data.id, type: 'edit' }
        this.$nextTick(() => {
          this.$refs.inAndOutManagementAdd.init(param)
        })
      } else if (val.type === 'output') {
        this.centervisible = true
        this.addAndEdit = '出库'
        const param = { id: val.data.id, type: 'output' }
        this.$nextTick(() => {
          this.$refs.inAndOutManagementAdd.init(param)
        })
      }
    },
    buttonClick(val) {
      console.log(val)
      switch (val.btnName) {
        case 'search':
          this.listQuery.lineName = val.lineName
          this.listQuery.libraryName = val.libraryName
          this.listQuery.materialName = val.materialName
          this.listQuery.current = 1
          this.getList()
          break
        case 'add':
          this.centervisible = true
          this.addAndEdit = '入库'
          this.$nextTick(() => {
            this.$refs.inAndOutManagementAdd.init()
          })
          break
        default:
          outInRecordRecordExport({ ...this.listQuery }).then((response) => {
            console.log(response)
            let fileName = ''
            const contentDisposition = response.headers['content-disposition']
            if (contentDisposition) {
              fileName = decodeURIComponent(
                contentDisposition.slice(
                  contentDisposition.indexOf('filename=') + 9
                )
              )
            }
            const blob = new Blob([response.data])
            const reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = (e) => {
              const a = document.createElement('a')
              a.download = fileName
              a.href = e.target.result
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
            }
          })
      }
    },
    tableRowClassName({ row }) {
      if (row.flag && row.flag > 0) {
        return 'danger-row'
      }
      return ''
    },
    handleCancel() {
      this.$refs.inAndOutManagementAdd.formClear()
      this.addAndEdit = ''
      this.centervisible = false
    },
    handleConfirm() {
      this.$refs.inAndOutManagementAdd.submitForm()
    },
    successSubmit() {
      this.handleCancel()
      this.getList()
    }
  }
}
</script>