patrol-wzgl-web/src/views/component/inventorysSelect.vue

<template>
  <div>
    <!-- 选择物资编号 -->
    <Modal v-model="isShowWuzi" :z-index="10000" width="70" title="库存选择" :loading="showLoading">
      <div class="searchCompanys">
        <el-input
          v-model="wuzibianmakeyword"
          style="margin-right:10px"
          clearable
          type="text"
          placeholder="请输入物资编码查找库存"
          @keyup.enter.native="getWuzi"
        />
        <el-input
          v-model="wuzimingchengkeyword"
          style="margin-right:10px"
          clearable
          type="text"
          placeholder="请输入物资名称查找"
          @keyup.enter.native="getWuzi"
        />
        <el-button type="primary" @click="getWuzi">查询</el-button>
      </div>

      <Table
        ref="currentRowTable"
        highlight-row
        :columns="wuziColumns"
        :data="wzList"
        @on-current-change="wuziSelect"
      />
      <Page
        :current="wuziPageIndex"
        :total="wuziTotal"
        simple
        style="padding-top: 14px;display: flex;justify-content: center;"
        @on-change="wuziPageChange"
      />

      <div slot="footer" align="right">
        <Button class="btn" size="default" type="default" @click="mingxiCancel">取消</Button>
        <Button class="btn" size="default" type="primary" @click="mingxiConfirm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
// import {
//   index,
// } from "@/api/system/baseForm.js"
import {
  index
} from '@/api/inventory.js'
export default {
  data() {
    return {
      // 物资
      showLoading: false,
      isShowWuzi: false,
      wuziPageIndex: 1,
      wuzibianmakeyword: '',
      wuzimingchengkeyword: '',
      wuziTotal: 0,
      wzList: [],
      selectItem: {},
      wuziColumns: [{
        width: 60,
        _isChecked: false,
        key: 'isSelect',
        resizable: true,
        render: (h, params) => {
          return h('div', [
            h('Radio', {
              props: {
                value: params.row.isSelect
              },
              on: {
                'on-change': (e) => {
                  this.wzList.forEach((items) => {
                    this.$set(items, 'isSelect', false)
                  })
                  this.wzList[params.index].isSelect = e
                }
              }
            })
          ])
        }
      }, {
        title: '物资编码',
        key: 'wuzibianma'
      }, {
        title: '物资名称',
        key: 'zichanmingcheng'
      }, {
        title: '在库数量',
        key: 'zaikushuliang'
      }, {
        title: '入库批次',
        key: 'rukupici'
      }, {
        title: '物资类型',
        key: 'wuzileixing'
      }, {
        title: '所属种类',
        key: 'fenlei_detail.value',
        render: (h, params) => {
          return h('div', [
            h('strong', params.row.fenlei_detail ? params.row.fenlei_detail.value : '')
          ])
        }
      }, {
        title: '物资型号',
        key: 'guigexinghao'
      }, {
        title: '物资规格',
        key: 'wuziguige'
      }, {
        title: '单位',
        key: 'jiliangdanwei'
      }]
    }
  },
  watch: {
    isShowWuzi(newVal) {
      if (newVal) {
        this.getWuzi()
      }
    }
  },
  methods: {
    async getWuzi() {
      this.showLoading = true
      const res = await index({
        page_size: 10,
        page: this.wuziPageIndex,
        sort_type: 'DESC',
        sort_name: 'wuzibianma',
        // table_name: 'inventorys',
        filter: [{
          'key': 'zichanmingcheng',
          'op': 'like',
          'value': this.wuzimingchengkeyword
        }, {
          'key': 'wuzibianma',
          'op': 'like',
          'value': this.wuzibianmakeyword
        }]
      })

      for (var m of res.list.data) {
        m.isSelect = false
      }
      this.wzList = res.list.data
      this.wuziTotal = res.list.total
      this.showLoading = false
      console.log('res', this.wzList)
    },
    wuziSelect(e) {
      console.log(e)
      this.wzList.forEach((items) => {
        this.$set(items, 'isSelect', false)
        if (items.id == e.id) {
          this.$set(items, 'isSelect', true)
        }
      })
      this.selectItem = e
    },
    wuziPageChange(e) {
      console.log('e', e)
      this.wuziPageIndex = e
      this.selectItem = {}
      this.getWuzi()
    },
    mingxiConfirm() {
      if (Object.keys(this.selectItem).length === 0) {
        this.isShowWuzi = false
        return
      }
      this.$emit('refresh', this.selectItem)
      this.isShowWuzi = false
    },
    mingxiCancel() {
      this.selectItem = {}
      this.wuziPageIndex = 1
      this.isShowWuzi = false
    }
  }
}
</script>

<style scoped>
    .searchCompanys {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }
</style>