ZW_MultiSelect/wms-vue/src/components/duochaxun/Liaoxiangjiankong.vue

<template>
  <div class="div1">

    <div class="div2" style="padding-bottom: 10px">
      <el-form ref="form" :model="param" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="4">
            <el-form-item label="类型:">
              <el-select v-model="param.ct_code"  multiple filterable placeholder="请选择类型" style="width: 100%;">
                <el-option
                    v-for="item in typess"
                    :key="item.label"
                    :label="item.values"
                    :value="item.values"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item  label="是否在库:" >
              <el-select v-model="param.agvFlag"  placeholder="请选择是否在库"  >
                <el-option
                    v-for="item in agvFlag"
                    :key="item.label"
                    :label="item.values"
                    :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

<!--          <el-col :span="4">-->
<!--            <el-form-item  label="状态:" >-->
<!--              <el-select v-model="param.s_status" multiple filterable placeholder="请选择状态"  >-->
<!--                <el-option-->
<!--                    v-for="item in Sstatus"-->
<!--                    :key="item.label"-->
<!--                    :label="item.values"-->
<!--                    :value="item.values"-->
<!--                >-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

        </el-row>

        <el-button type="success" @click="find">查找</el-button>
        <el-button type="success" @click="rest">重置</el-button>&nbsp;&nbsp;
      </el-form>
    </div>

    <el-table
        border
        v-loading="this.tableloding"
        :height="MaxHeight"
        :header-cell-style="{background:'#000',color:'#fff'}"
        :data="tableData"
        id="educe-table"
        ref="tableData"
        style="width: 100%;">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          label="序号"
          v-if="false"
          width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label=""
          width="100"
          >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.code}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
          label="总数"
          width="100"
          >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.zs}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
          width="100"
          label="满不在库"
          >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.mbzk}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          label="满在库"
          width="100"
          >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.mzk}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          label="空不在库"
          width="100"
      >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.kbzk}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          label="空在库"
          width="100"
      >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.kzk}}</span>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[ 50, 100, 200,500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableloding: false,
      isShow:false,//是否展示全部搜索条件
      tableData: [],

      pageSize: 50,
      pageNum: 1,
      total: 3,
      param: {
        ct_code: [],
        agvFlag: '',
        s_status: [],
      },
      //类型
      typess: [
        {
          values: 'X1',
          label: 1,
        },
        {
          values: 'X2',
          label: 2,
        },
        {
          values: 'X4',
          label: 3,
        },
        {
          values: 'X8',
          label: 4,
        },
        {
          values: 'XN',
          label: 5,
        },
      ],
      //是否
      agvFlag: [{
        values: '是',
        label: 1,
      },{
        values: '否',
        label: 0,
      }
      ],
      //状态
      Sstatus:[
        {
          values: 'FREE',
          label: 1,
        },
        {
          values: 'STATUS',
          label: 2,
        },
        {
          values: 'OCCUPY',
          label: 3,
        },
      ],
    }
  },computed:{
    MaxHeight(){
      return  window.innerHeight - 240 +"px";
    }
  },
  mounted: function () {
    this.queryUser();
    //this.Typess();
  },updated() {
    this.$nextTick(() => {
      if(this.$refs.tableData!=null){
        this.$refs.tableData.doLayout()
      }

    })
  },
  methods: {
    // 求和操作
    // getSummaries(param) {
    //   //解构赋值
    //   //columns:所有列的集合
    //   //data:你的原始数据  [{id:1,num:1,price:20},{id:2,num:1,price:20},{id:3,num:1,price:20}]
    //   const {
    //     columns,
    //     data
    //   } = param;
    //   //准备一个空的结果数组,用来存放每一列的和
    //   const sums = [];
    //
    //   columns.forEach((column, index) => {
    //
    //     //金额的计算   data里的num字段和price相乘
    //     if (index == 4) {
    //       sums[index]="汇总:"
    //       const values = data.map(item => Number(item['shu']));
    //        sums[index] += values.reduce((prev, curr) => {
    //        const value = Number(curr);
    //        //确定数据是否为空,不为空进行计算,为空返回原值
    //        if (!isNaN(value)) {
    //          return prev + curr;
    //        } else {
    //          return prev;
    //        }
    //       },0)
    //
    //     }
    //     else {
    //       sums[index] = '';
    //     }
    //   });
    //
    //   return sums;
    // },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = 1;
      this.pageSize = val;
      this.queryUser();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryUser();
    },
    // Typess(){
    //   this.$axios.post(this.$httpUrl + '/dcx/type', {
    //
    //   }).then(res => res.data)
    //       .then(res => {
    //         if (res.code == 200) {
    //           this.typess = res.data;
    //         } else {
    //           this.$message.error('获取数据失败');
    //         }
    //         // eslint-disable-next-line no-unused-vars
    //       },err=>{
    //         this.tableloding=false;
    //       })
    // },

    queryUser() {
      //列表数据加载
      this.$axios.post(this.$httpUrl + '/dcx/querydcx', {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        param: this.param,
      }).then(res => res.data)
          .then(res => {
            if (res.code == 200) {
              this.tableData = res.data
              this.total = res.total
              //console.log(res.data)
            } else {
              this.$message.error('获取数据失败');
            }

            // eslint-disable-next-line no-unused-vars
          },err=>{
            this.tableloding=false;
          })

    },
    find(){
      this.queryUser();
    },
    Allquesr(){
      //查询按钮
      if(this.checked){
        this.isShow=true;
      }else {
        this.isShow=false;
      }
    },
    rest() {
      //条件查询重置
      this.checked=false;
      this.isShow=false;
      this.param={};
    },
  }
}
</script>
<style scoped>

</style>