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

<template>
  <div>
    <!-- 选择物资编号 -->
    <Modal v-model="isShowWuzi" :z-index="10000" width="70" title="物资选择" :loading="showLoading">
      <div class="searchCompanys">
        <el-cascader v-model="select.fenlei" ref="cascaders" clearable popper-class="select_popper"
          style="margin-right: 10px;flex-basis: 20%;" :options="fenleiList" :props="{label:'name',value:'id'}"
          @change="(e)=>{changeFenlei(e)}" />
        <!-- <el-input v-model="select.wuzibianma" style="margin-right:10px;flex-basis: 20%;" clearable type="text" placeholder="请输入种类编码查找库存"
          @keyup.enter.native="getWuzi" /> -->
        <el-input v-model="select.zichanmingcheng" style="margin-right:10px;flex-basis: 20%;" 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="select.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 as getFenleilist
  } from '@/api/fenlei.js'
  export default {
    data() {
      return {
        // 物资
        fenleiList: [],
        showLoading: false,
        isShowWuzi: false,

        select:{
          wuzibianma: '',
          zichanmingcheng: '',
          fenlei:'',
          wuziPageIndex: 1,
        },
        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: 'zichanmingcheng'
        }, {
          title: '所属种类',
          key: 'fenlei_material_info_types_id_relation.name',
          render: (h, params) => {
            return h('div', [
              h('strong', params.row.fenlei_material_info_types_id_relation ? params.row
                .fenlei_material_info_types_id_relation.name : '')
            ])
          }
        },
        // {
        //   title: '种类编码',
        //   key: 'wuzibianma'
        // },
        {
          title: '物资类型',
          key: 'wuzileixing'
        }, {
          title: '物资型号',
          key: 'guigexinghao'
        }, {
          title: '物资规格',
          key: 'wuziguige'
        }, {
          title: '单位',
          key: 'jiliangdanwei'
        }]
      }
    },
    created() {
      this.getFenlei()
    },
    watch: {
      isShowWuzi(newVal) {
        if (newVal) {
          this.getWuzi()
        }
      }
    },
    methods: {
      async getFenlei() {
        const res = await getFenleilist({
          tree: 1,
          sort_type:'ASC',
          sort_name:'sort'
        })
        this.fenleiList = this.removeEmptyChildren(res)
      },
      changeFenlei(e, row) {
        console.log('e', e)
        if (e) {
          this.select.fenlei = e[e.length - 1]
        } else {
          this.select.fenlei = ''
        }
      },
      // 移除children=[]
      removeEmptyChildren(node) {
        if (Array.isArray(node)) {
          return node.map(child => {
            if (child.children) {
              // 递归处理子节点
              child.children = this.removeEmptyChildren(child.children);
              // 若处理后 children 为空，删除该属性
              if (child.children.length === 0) {
                delete child.children;
              }
            }
            return child;
          });
        }
        return [];
      },
      async getWuzi() {
        this.showLoading = true
        const res = await index({
          page_size: 10,
          page: this.select.wuziPageIndex,
          table_name: 'material_infos',
          filter: [{
            'key': 'zichanmingcheng',
            'op': 'like',
            'value': this.select.zichanmingcheng
          }, {
            'key': 'wuzibianma',
            'op': 'like',
            'value': this.select.wuzibianma
          }, {
            "key": "fenlei",
            "op": "eq",
            "value": this.select.fenlei ? this.select.fenlei : ''
          }]
        })
        for (var m of res.data) {
          m.isSelect = false
        }
        this.wzList = res.data
        this.wuziTotal = res.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.select.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.select.wuziPageIndex = 1
        this.isShowWuzi = false
      }
    }
  }
</script>
<style lang="scss">
  .select_popper {
    z-index: 99999 !important
  }
</style>
<style scoped>
  .searchCompanys {
    display: flex;
    /* justify-content: space-between; */
    margin-bottom: 15px;
  }
</style>