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 style="margin-right:10px" clearable type="text" @keyup.enter.native="getWuzi"
          v-model="wuzibianmakeyword" placeholder="请输入物资编码查找库存"></el-input>
        <el-input style="margin-right:10px" clearable type="text" @keyup.enter.native="getWuzi"
          v-model="wuzimingchengkeyword" placeholder="请输入物资名称查找"></el-input>
        <el-button type="primary" @click="getWuzi">查询</el-button>
      </div>

      <Table highlight-row ref="currentRowTable" :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>