wms / wms-cloud-ui · Files

<template>
  <div class="app-container">
    <el-form ref="form" :model="queryParams" inline>
      <el-form-item label="库位编码" size="small">
        <el-input
          v-model="queryParams.code"
          clearable
          size="small"
          style="width: 240px"
          @clear="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="容器编号" size="small">
        <el-input
          v-model="queryParams.containerCode"
          clearable
          size="small"
          style="width: 240px"
          @clear="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="库位状态" size="small">
        <el-select
          v-model="queryParams.status"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option value="">
            所有
          </el-option>
          <el-option v-for="item in locationStatus"
                     :label="item.dictLabel"
                     :value="item.dictValue"
                      />
        </el-select>
      </el-form-item>
      <el-form-item label="库区编码" size="small">
        <el-input
          v-model="queryParams.zoneCode"
          clearable
          size="small"
          style="width: 240px"
          @clear="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="行" size="small">
        <el-input
          v-model="queryParams.iRow"
          clearable
          size="small"
          style="width: 240px"
          @clear="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="列" size="small">
        <el-input
          v-model="queryParams.iColumn"
          clearable
          size="small"
          style="width: 240px"
          @clear="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="层" size="small">
        <el-input
          v-model="queryParams.iLayer"
          clearable
          size="small"
          style="width: 240px"
          @clear="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="格" size="small">
        <el-input
          v-model="queryParams.iGrid"
          clearable
          size="small"
          style="width: 240px"
          @clear="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="库位类型" size="small">
        <el-select
          v-model="queryParams.locationType"
          clearable
          size="small"
          style="width: 240px">
          <el-option value="">所有</el-option>
          <el-option v-for="item in locationType"
                     :label="item.dictLabel"
                     :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" size="small">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00','23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-form-item size="small">
        <el-button size="small" icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="resetParams('form')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row style="margin-top: 6px" :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          @click=""
          v-hasPermi="['']"
        >批量新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="single"
          @click="handleDelete"
          v-hasPermi="['']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          :disabled="multiple"
          @click="openPrint"
          v-hasPermi="['']"
        >打印
        </el-button>
      </el-col>
      <div class="top-right-btn">
        <el-row>
          <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
            <el-button icon="el-icon-search" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button icon="el-icon-refresh" circle></el-button>
          </el-tooltip>
        </el-row>
      </div>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      :header-cell-style="{'text-align':'center',background:'#F8F8F9',color:'#515A6E'}"
      :cell-style="{'text-align':'center'}"
      tooltip-effect="dark"
      style="width: 100%"
      v-loading="loading"
      @select="fillData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="code" label="库位编码"></el-table-column>
      <el-table-column prop="iRow" label="行"></el-table-column>
      <el-table-column prop="iColumn" label="列"></el-table-column>
      <el-table-column prop="iLayer" label="层"></el-table-column>
      <el-table-column prop="iGrid" label="格"></el-table-column>
      <el-table-column prop="rowFlag" label="内外侧">
        <template slot-scope="scope">
          <el-button :type="scope.row.rowFlag | a" round>
            {{statusFormat(scope.row.rowFlag)}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="locationType" label="库位类型">
        <template slot-scope="scope">
          <el-button :type="scope.row.locationType | a" round>
            {{statusFormat(scope.row.locationType)}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="containerCode" label="容器编号"></el-table-column>
      <el-table-column prop="zoneCode" label="库区编码"></el-table-column>
      <el-table-column prop="status" label="库位状态">
        <template slot-scope="scope">
          <el-button :type="scope.row.status | a" round>
            {{statusFormat(scope.row.status)}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="创建时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.created) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createdBy" label="创建用户"></el-table-column>
      <el-table-column prop="lastUpdated" label="更新时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastUpdated) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="lastUpdateBy" label="更新用户"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :page-sizes="[10,20,50,100]"
      :total="pageSize"
    />

    <itemCRUDDialog :show.sync="diaOpen" :title="title"
                    :switch="switch1" :diaForm="diaForm"
                    :locationType="locationType" :locationStatus="locationStatus"
                    :zone="zone"/>

    <printDialog :showP.sync="diaOpenPrint" :tableData="printData"/>

  </div>
</template>

<script>
  import { queryList, edit, add, remove } from '@/api/config/InventoryInfo/location'
  import { getDicts } from '@/api/system/dict/data'
  import itemCRUDDialog from '@/views/config/inventoryInfo/position/location/dialog/itemCRUDDialog'
  import printDialog from '@/views/config/inventoryInfo/position/location/dialog/printDialog'

  export default {
    name: 'location',
    components: {
      itemCRUDDialog,
      printDialog
    },
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        //搜索下拉框
        locationType:[],
        locationStatus:[],
        zone:[],
        dateRange:[],
        //表格数据
        tableData: [],
        //打印数据
        printData: [],
        //新增、修改数据
        diaForm: {},
        // 非单个禁用
        single: true,
        //非多个禁用
        multiple: true,
        // 对话框标题
        title: '',
        //弹窗显示开关
        diaOpen: false,
        diaOpenPrint: false,
        pageNum: 1,
        // 是否有效数据字典
        statusOptions:[],
        pageSize: '',
        loading: true,
        date: [],
        //弹窗下拉框数据
        selectValue: [],
        //增加与修改转换开关
        switch1: '',
        //临时存放标签样式
        labelType: '',
        //临时存放类型样式
        typeData:'',
        dict: [],
        ids: [],
        tips: false
      }
    },
    filters:{
      a:function () {

      }
    },
    created() {
      this.handleQuery()
      getDicts("locationType").then(response=>{
        console.log(response)
        response.data.forEach(item=>{
          this.locationType.push(item)
        })
      })
      getDicts("locationStatus").then(response=>{
        response.data.forEach(item=>{
          this.locationStatus.push(item)
        })
      })
      getDicts("zoneCode").then(response=>{
        response.data.forEach(item=>{
          this.zone.push(item)
        })
      })
    },
    methods: {
      // 是否有效字典翻译
      statusFormat(item) {
        return this.selectDictLabel(this.statusOptions, item);
      },
      handleQuery() {
        this.loading = true
        queryList(this.addDateRange2(this.queryParams, this.dateRange)).then(res => {
          this.tableData = res.rows
          this.pageSize = res.total
          this.loading = false
        })
      },

      // 清空查询列表
      resetParams(formName) {
        this.queryParams.code = ''
        this.queryParams.name = ''
        this.dateRange=[]
        this.$refs[formName].resetFields()
        this.handleQuery()
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.printData = selection.map(item => {
          return {
            'code':item.code
        }
        })
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /**打开打印对话框*/
      openPrint() {
        this.diaOpenPrint = true
      },
      // /**填入对话框数据*/
      // fillData(selection, row){
      //   if(selection.length<=1){
      //     this.diaForm=selection[0]
      //   }
      // },
      /** 新增按钮操作 */
      handleAdd() {
        this.switch1 = false
        this.title = '添加货主'
        this.diaOpen = true
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        if (row){
          this.diaForm=row
        }
        this.switch1 = true
          this.title = '修改货主'
          this.diaOpen = true
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const code = row.code || this.ids
        this.$confirm('是否确认删除货主编号为"' + code + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return remove(code)
        }).then(() => {
          this.handleQuery()
          this.msgSuccess('删除成功')
        }).catch(function() {
        })
      }
      /**打印按钮操作*/

    }
  }
</script>

<style scoped>

</style>