wms / wms-cloud-ui · Files

<!-- 任务下发 -->
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" >
      <el-tab-pane label="主页" name="first">
        <div class="app-container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
              <el-form-item label="入库单号" prop="receiptCode">
                <el-input v-model="queryParams.receiptCode" placeholder="请输入入库单号" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="容器编号" prop="receiptContainerCode">
                <el-input v-model="queryParams.receiptContainerCode" placeholder="请输入容器编号" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="库位编号" prop="toLocation">
                <el-input v-model="queryParams.toLocation" placeholder="请输入库位编号" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="任务类型" size="small" prop="taskType">
                <el-select v-model="queryParams.taskType" placeholder="所有">
                  <el-option v-for="dict in taskOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="容器任务状态" size="small" prop="status">
                <el-select v-model="queryParams.status" placeholder="所有">
                  <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.selectDictLabel" :value="dict.dictValue"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建人" prop="createdBy">
                <el-input v-model="queryParams.createdBy" placeholder="请输入创建人" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                  start-placeholder="开始日期" end-placeholder="结束日期" >
                </el-date-picker>
              </el-form-item>
             <el-form-item size="small">
               <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
               <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="buildTask"
                :disabled="headerMultiple"
                v-hasPermi="['receipt:receiptContainer:add']"
                >批量生成任务</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :disabled="headerMultiple"
                @click="headerDelete"
                v-hasPermi="['receipt:receiptContainer:remove']"
                >批量撤销组盘</el-button>
              </el-col>
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getHeaderList"></right-toolbar>
            </el-row>
            <el-table v-loading="headerLoading" :data="HeaderList" :header-cell-style="{background:'#F8F8F9',color:'#515A6E'}" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
              <el-table-column type="selection" width="50" />
              <el-table-column prop="id" label="组盘头id" sortable />
              <el-table-column prop="containerCode" label="容器编号" header-align="center" align="center" sortable />
              <el-table-column prop="toLocation" label="库位编号" header-align="center" align="center" sortable />
              <el-table-column prop="taskType" label="任务类型" sortable >
                <template slot-scope="scope">
                  <el-button size="mini" type="taskType" round>{{
                    taskFormat(scope.row, scope.column)
                    }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="容器任务状态" sortable>
                <template slot-scope="scope">
                  <el-button size="mini" type="success" round>{{
                    statusFormat(scope.row, scope.column)
                    }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="created" label="创建时间" sortable >
                <template slot-scope="scope">
                  <span>{{dateFormat('YYYY-mm-dd HH:MM',scope.row.created)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createdBy" label="创建人" sortable />
              <el-table-column prop="center" label="操作" >
               <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-my-detail"
                  @click="handleDetail(scope.row)"
                  v-hasPermi="['receipt:receiptContainerHeader:edit']"
                >明细</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  v-if="scope.row.status == '0'"
                  @click="buildTask(scope.row)"
                  v-hasPermi="['receipt:receiptContainerHeader:add']"
                >生成任务</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  v-if="scope.row.status == '0'"
                  @click="headerDelete(scope.row)"
                  v-hasPermi="['receipt:receiptContainerHeader:remove']"
                >取消配盘</el-button>
               </template>
              </el-table-column>
            </el-table>
        </div>
        <pagination
          v-show="headerTotal > 0"
          :total="headerTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getHeaderList"/>
      </el-tab-pane>
      <el-tab-pane label="明细" name="second" v-if="queryDetailParams.shippingContainerId !== undefined">
        <right-toolbar :showSearch.sync="showDetailSearch" @queryTable="getDetailList"></right-toolbar>
        <el-table v-loading="detailLoading" :data="DetailList" :header-cell-style="{background:'#F8F8F9',color:'#515A6E'}" style="width: 100%;" row-key="id" >
          <el-table-column type="selection" width="50" />
          <el-table-column prop="id" label="明细id" />
          <el-table-column prop="receiptCode" label="入库单号" header-align="center" align="center" sortable />
          <el-table-column prop="materialCode" label="物料编码" header-align="center" align="center" sortable />
          <el-table-column prop="materialName" label="物料名称" sortable />
          <el-table-column prop="materialSpec" label="物料规格" sortable />
          <el-table-column prop="project" label="项目号" sortable />
          <el-table-column prop="qty" label="组盘数量" sortable />
          <el-table-column prop="created" label="创建时间" sortable />
          <el-table-column prop="createdBy" label="创建用户" sortable />
        </el-table>
        <pagination
          v-show="detailTotal > 0"
          :total="detailTotal"
          :page.sync="queryDetailParams.pageNum"
          :limit.sync="queryDetailParams.pageSize"
          @pagination="getDetailList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listreceiptContainerHeader,createTask,delHeader } from "@/api/receipt/receiptContainerHeader/header";
import { listReceiptDetail } from "@/api/receipt/receiptContainerHeader/detail";

export default {
  name: "receiptContainerHeader",
  data() {
    return {
      activeName: 'first',


      // 主表遮罩层
      headerLoading: true,
      // 主表选中数组
      headerIds: [],
      // 主表非单个禁用
      headerSingle: true,
      // 主表非多个禁用
      headerMultiple: true,
      // 主表显示搜索条件
      showSearch: true,
      // 主表总条数
      headerTotal: 0,
      // 主表参数表格数据
      HeaderList: [],
      // 主表弹出层标题
      title: "",
      // 主表是否显示弹出层
      open: false,
      // 主表类型数据字典
      typeOptions: [],
      // 主表数据字典
      taskOptions: [],
      statusOptions: [],
      // 主表日期范围
      dateRange: [],
      // 主表查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        receiptCode:undefined,
        receiptContainerCode:undefined,
        toLocation:undefined,
        taskType:undefined,
        status:undefined,
        createdBy:undefined

      },
      // 主表表单参数
      form: {},
      // 主表表单校验
      rules: {
        receiptCode: [
          { required: true, message: "入库单号不能为空", trigger: "blur" }
        ],
        receiptContainerCode: [
          { required: true, message: "容器编号不能为空", trigger: "blur" }
        ],
        toLocation: [
          { required: true, message: "库位编号不能为空", trigger: "blur" }
        ]
      },
      // 明细遮罩层
      detailLoading: true,
      // 明细选中数组
      detailIds: [],
      // 明细非单个禁用
      detailSingle: true,
      // 明细非多个禁用
      detailMultiple: true,
      // 明细显示搜索条件
      showDetailSearch: true,
      // 明细总条数
      detailTotal: 0,
      // 明细表格数据
      DetailList: [],
      // 明细弹出层标题
      detailTitle: "",
      // 明细是否显示弹出层
      detailOpen: false,
      // 明细查询参数
      queryDetailParams: {
        id:undefined,
        pageNum: 1,
        pageSize: 10,

        receiptCode:undefined,
        materialCode:undefined,
        materialName:undefined,
        materialSpec:undefined,
        project:undefined,
        qty:undefined,
        created:undefined,
        createdBy:undefined,
      },
      // 明细表单参数
      detailForm: {},
      // 明细表单校验
      detailRules: {

      },
      activeName: "first",
      shippingContainerId:'',
    };
  },
  created() {
    this.getHeaderList();
    //任务类型
    this.getDicts("taskType").then((response) => {
      console.log(response)
      this.taskOptions = response.data;
    });
    //容器类型
    this.getDicts("taskStatus").then(response => {
      this.statusOptions = response.data;
    });
  },
  methods: {
    /** 主表查询参数列表 */
    getHeaderList() {
      this.headerLoading = true;
      listreceiptContainerHeader(this.addDateRange(this.queryParams)).then(response => {
          console.log(response);
          this.HeaderList = response.rows;
          this.headerTotal = response.total;
          this.headerLoading = false;
        });
    },
    // 主表参数系统内置字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.configType);
    },
    // 主表字典翻译(任务类型、容器任务状态)
    taskFormat(row, column){
      return this.selectDictLabel(this.taskOptions, row.taskType);
    },
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    /** 主表搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getHeaderList();
    },
    /** 主表重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 主表多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection);
      this.headerIds = selection.map(item => item.id)
      this.headerSingle = selection.length!=1
      this.headerMultiple = !selection.length
    },
    // 主表明细按钮操作
      handleDetail(row) {
        console.log(row)
        this.queryDetailParams.shippingContainerId = row.id
        this.id = row.id;
        this.activeName = 'second'
        this.detailLoading = true;

        listReceiptDetail({shippingContainerId:row.id}).then((response) => {
          console.log(response);
          this.DetailList = response.rows;
          this.detailTotal = response.total;
          this.detailLoading = false;
        });
      },
  /** 查询明细列表 */
  getDetailList() {
    this.detailLoading = true;
    listReceiptDetail(this.addDateRange(this.queryDetailParams, this.DetailDateRange,))
      .then((response) => {
      console.log(response);
      this.DetailList = response.rows;
      this.detailTotal = response.total;
      this.detailLoading = false;
    });
  },
  //生成任务
  buildTask() {
    createTask(this.headerIds).then(response => {
      console.log(response)
      if(response.code == 200) {
        this.msgSuccess(response.msg);
        this.getHeaderList();
      }
      else {
        this.msgError(response.msg)
      }
    })
  },

  /** 主表删除按钮操作 */
  headerDelete(row) {
    const headerIds = row.id || this.headerIds;
    this.$confirm(
      '是否撤销组盘为"' + headerIds + '"的数据项?',
      "警告",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }
    )
      .then(function() {
        return delHeader(headerIds);
      })
      .then(() => {
        this.getHeaderList();
        this.msgSuccess("删除成功");
      })
      .catch(function() {});
  },
  //时间带T的转化
  dateFormat(fmt, date) {
    let ret="";
    date=new Date(date);
    const opt = {
      'Y+': date.getFullYear().toString(), // 年
      'm+': (date.getMonth() + 1).toString(), // 月
      'd+': date.getDate().toString(), // 日
      'H+': date.getHours().toString(), // 时
      'M+': date.getMinutes().toString(), // 分
      'S+': date.getSeconds().toString() // 秒
      // 有其他格式化字符需求可以继续添加，必须转化成字符串
    }
    for (let k in opt) {
      ret = new RegExp('(' + k + ')').exec(fmt)
      if (ret) {
        fmt = fmt.replace(
          ret[1],
          ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
        )
      }
    }
    return fmt
  }

  }
};


</script>

<style>
</style>