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.locationCode"
          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 containerStatus"
                     :label="item.dictLabel"
                     :value="item.dictValue"
                      />
        </el-select>
      </el-form-item>
      <el-form-item label="容器类型" size="small">
        <el-select
          v-model="queryParams.containerType"
          clearable
          size="small"
          style="width: 240px">
          <el-option value="">
            所有
          </el-option>
          <el-option v-for="item in containerType"
                     :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"
          :disabled="single"
          @click="handleUpdate"
          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="warehouseCode" label="仓库编码"></el-table-column>
      <el-table-column prop="companyCode" label="货主编码"></el-table-column>
      <el-table-column prop="containerType" label="容器类型"></el-table-column>
      <el-table-column prop="locationCode" 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="enable" label="是否有效">
        <template slot-scope="scope">
          <el-button :type="scope.row.enable | a" round>
            {{statusFormat(scope.row.status)}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="创建时间"></el-table-column>
      <el-table-column prop="createdBy" label="创建用户"></el-table-column>
      <el-table-column prop="lastUpdated" label="更新时间"></el-table-column>
      <el-table-column prop="lastUpdatedBy" 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"
                    :containerType="containerType" />
    <printDialog :showP.sync="diaOpenPrint" :tableData="printData"/>

  </div>
</template>

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

  export default {
    name: 'material',
    components: {
      itemCRUDDialog,
      printDialog
    },
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        //搜索下拉框
        containerType:[],
        containerStatus:[],
        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("containerType").then(response=>{
        response.data.forEach(item=>{
          this.containerType.push(item)
        })
      })
      getDicts("containerStatus").then(response=>{
        response.data.forEach(item=>{
          this.containerStatus.push(item)
        })
      })
    },
    methods: {
      // 是否有效字典翻译
      statusFormat(item) {
        return this.selectDictLabel(this.statusOptions, item);
      },
      handleQuery() {
        this.loading = true
        queryList(this.addDateRange(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() {
        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>