wms / wms-cloud-ui · Files

<template>
  <el-dialog
    title="空托盘选取"
    :visible.sync="visible"
    :showcontainer="showcontainer"
    width="800px"
    append-to-body
    @close="$emit('update:showcontainer', false)"
  >

    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >

      <el-form-item label="容器编码" prop="containerCode">
        <el-input
          v-model="queryParams.containerCode"
          placeholder="请输入容器编码"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="库位编码" prop="locationCode">
        <el-input
          v-model="queryParams.locationCode"
          placeholder="请输入库位编码"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />

      </el-form-item>

      <el-form-item>

        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >

      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"

         :col-data="colData"
            @selectData="selectData"

      ></right-toolbar>

    </el-row>

    <el-table v-loading="loading" :data="containerList" ref="table">

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"

        v-if="colData[0].istrue"

      >

        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"

            icon="el-icon-edit-outline"

            @click="handleSelect(scope.row)"

            >选取</el-button
          >

        </template>
      </el-table-column>

      <el-table-column

        label="id"
        align="center"
        prop="id"
        width="55"
        v-if="colData[1].istrue"
      />
      <el-table-column

        label="库位编码"
        align="center"
        prop="code"

        v-if="colData[2].istrue"

      />
      <el-table-column
        label="容器编码"
        align="center"
        prop="containerCode"

        v-if="colData[3].istrue"
      />
      <el-table-column
        label="仓库编码"
        align="center"
        prop="warehouseCode"
        v-if="colData[4].istrue"
      />
      <el-table-column
        label="行"
        align="center"
        prop="iRow"
        width="55"
        v-if="colData[5].istrue"
      />
      <el-table-column
        label="列"
        align="center"
        prop="iColumn"
        width="55"
        v-if="colData[6].istrue"
      />
      <el-table-column
        label="层"
        align="center"
        prop="iLayer"
        width="55"
        v-if="colData[7].istrue"
      />
      <el-table-column
        label="格"
        align="center"
        prop="iGrid"
        width="55"
        v-if="colData[8].istrue"

      />
      <el-table-column
        label="库位类型"
        align="center"
        prop="locationType"
        width="80"

        v-if="colData[9].istrue"
      />
      <el-table-column
        label="库区"
        align="center"
        prop="zoneCode"
        width="60"
        v-if="colData[10].istrue"
      />
      <el-table-column
        label="状态"
        align="center"
        prop="status"
        width="60"
        v-if="colData[11].istrue"
      />
      <el-table-column
        label="上次盘点日期"
        align="center"
        prop="lastCycleCountDate"
        width="160"
        v-if="colData[12].istrue"

      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="created"
        width="160"

        v-if="colData[13].istrue"

      >

        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.created) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="创建用户"
        align="center"
        prop="createdBy"
        :show-overflow-tooltip="true"

        v-if="colData[14].istrue"

      />
      <el-table-column
        label="更新时间"
        align="center"
        prop="lastUpdated"
        width="160"

        v-if="colData[15].istrue"

      >

        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastUpdated) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="更新用户"
        align="center"
        prop="lastUpdatedBy"
        :show-overflow-tooltip="true"

        v-if="colData[16].istrue"

      />

    </el-table>

    <pagination

      v-show="total > 0"

      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </el-dialog>

</template>

<script>

import { listEmptyContainer } from "@/api/inventory/inventoryHeader/header";

export default {
  props: {
    showcontainer: {
      type: Boolean,

      default: false,
    },

  },
  data() {
    return {

      visible: this.showcontainer,

      loading: true,

      showSearch: true,

      total: 0,

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        containerCode: undefined,
        locationCode: undefined,
      },

      containerList: [],

      // istrue属性存放列的状态
      colData: [
        { title: "操作", istrue: true, disabled: true },
        { title: "id", istrue: false },
        { title: "库位编码", istrue: true },
        { title: "容器编码", istrue: true },
        { title: "仓库编码", istrue: true },
        { title: "行", istrue: true },
        { title: "列", istrue: true },
        { title: "层", istrue: true },
        { title: "格", istrue: true },
        { title: "库位类型", istrue: true },
        { title: "库区", istrue: true },
        { title: "状态", istrue: true },
        { title: "上次盘点日期", istrue: false },
        { title: "创建时间", istrue: true },
        { title: "创建用户", istrue: true },
        { title: "更新时间", istrue: true },
        { title: "更新用户", istrue: true },
      ],

    };

  },
  watch: {
    showcontainer() {

      this.visible = this.showcontainer;
    },

  },
  created() {
    this.getList();
  },

  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout();
    });
  },

  methods: {
    getList() {

      this.loading = true;
      listEmptyContainer(this.queryParams).then((response) => {
        this.containerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleSelect(row) {

      this.visible = false;
      this.$emit("passValue", row.code, row.containerCode);
    },

     /** 表格列显示隐藏切换操作 */
    selectData(val) {
      if (val) {
        this.colData.filter((i) => {
          if (val.indexOf(i.title) !== -1) {
            i.istrue = true;
          } else {
            i.istrue = false;
          }
        });
      }
    },

  },
};

</script>