<template> <div class="app-container"> <el-tabs v-model="activeName" type="card"> <el-tab-pane label="主表" name="first"> <el-form :model="queryHeaderParams" ref="queryHeaderForm" :inline="true" v-show="showHeaderSearch" label-width="100px" > <el-form-item label="任务id" prop="id"> <el-input v-model="queryHeaderParams.id" placeholder="请输入任务id" clearable style="width: 240px" size="small" @keyup.enter.native="headerQuery" /> </el-form-item> <el-form-item label="容器编号" prop="containerCode"> <el-input v-model="queryHeaderParams.containerCode" placeholder="请输入容器编号" clearable style="width: 240px" size="small" @keyup.enter.native="headerQuery" /> </el-form-item> <el-form-item label="源库位编号" prop="fromLocation"> <el-input v-model="queryHeaderParams.fromLocation" placeholder="请输入源库位编号" clearable style="width: 240px" size="small" @keyup.enter.native="headerQuery" /> </el-form-item> <el-form-item label="目的库位编号" prop="toLocation"> <el-input v-model="queryHeaderParams.toLocation" placeholder="请输入目的库位编号" clearable style="width: 240px" size="small" @keyup.enter.native="headerQuery" /> </el-form-item> <el-form-item label="创建时间"> <el-date-picker v-model="headerDateRange" 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> <el-button type="cyan" icon="el-icon-search" size="mini" @click="headerQuery" >搜索</el-button > <el-button icon="el-icon-refresh" size="mini" @click="resetHeaderQuery" >重置</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-printer" size="mini" :disabled="multiple" @click="headerPrint" >打印</el-button > </el-col> <right-toolbar :showSearch.sync="showHeaderSearch" @queryTable="getHeaderList" ></right-toolbar> </el-row> <el-table v-loading="headerLoading" :data="headerList" @selection-change="headerSelectionChange" > <el-table-column type="selection" width="55" align="center" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" > <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-my-detail" @click="detail(scope.row)" >明细</el-button > <el-button size="mini" type="text" icon="el-icon-s-promotion" v-if="scope.row.status < 10" @click="execute(scope.row)" >执行</el-button > <el-button size="mini" type="text" icon="el-icon-close" v-if="scope.row.status < 10" @click="remove(scope.row)" >取消</el-button > <el-button size="mini" type="text" icon="el-icon-check" v-if="scope.row.status < 100" @click="complete(scope.row)" >完成</el-button > </template> </el-table-column> <el-table-column label="任务id" align="center" prop="id" min-width="100" sortable /> <el-table-column label="任务类型" align="center" prop="taskType" min-width="100" > <template slot-scope="scope"> <el-button size="mini" :type="scope.row.taskType | taskTypeFilter" round >{{ taskTypeFormat(scope.row, scope.column) }}</el-button > </template> </el-table-column> <el-table-column label="源库位号" align="center" prop="fromLocation" :show-overflow-tooltip="true" /> <el-table-column label="目的库位号" align="center" prop="toLocation" min-width="100" /> <el-table-column label="容器号" align="center" prop="containerCode" sortable min-width="100" /> <el-table-column label="重量" align="center" prop="weight" /> <el-table-column label="站台" align="center" prop="stationCode" /> <el-table-column label="异常原因" align="center" prop="exceptionCode" sortable min-width="100" :show-overflow-tooltip="true" /> <el-table-column label="创建时间" align="center" prop="created" min-width="160" sortable > <template slot-scope="scope"> <span>{{ parseTime(scope.row.created) }}</span> </template> </el-table-column> <el-table-column label="任务下达人" align="center" prop="createdBy" min-width="100" :show-overflow-tooltip="true" /> <el-table-column label="更新时间" align="center" prop="lastUpdated" min-width="160" sortable > <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" /> </el-table> <pagination v-show="headerTotal > 0" :total="headerTotal" :page.sync="queryHeaderParams.pageNum" :limit.sync="queryHeaderParams.pageSize" @pagination="getHeaderList" /> </el-tab-pane> <el-tab-pane label="明细" name="second" v-if="queryDetailParams.taskId !== undefined" > <el-row :gutter="10" class="mb8"> <right-toolbar :showSearch.sync="showDetailSearch" @queryTable="getDetailList" ></right-toolbar> </el-row> <el-table v-loading="detailLoading" :data="detailList"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="明细ID" align="center" prop="id" min-width="60" /> <el-table-column label="任务头ID" align="center" prop="taskId" sortable width="100" /> <el-table-column label="单据编码" align="center" prop="billCode" :show-overflow-tooltip="true" /> <el-table-column label="单据明细ID" align="center" prop="billDetailId" min-width="130" sortable /> <el-table-column label="物料编码" align="center" prop="materialCode" :show-overflow-tooltip="true" /> <el-table-column label="物料名称" align="center" prop="materialName" /> <el-table-column label="项目号" align="center" prop="projectNo" /> <el-table-column label="容器编码" align="center" prop="containerCode" sortable min-width="100" /> <el-table-column label="源库位" align="center" prop="fromLocation" sortable min-width="100" /> <el-table-column label="目的库位" align="center" prop="toLocation" sortable min-width="100" /> <el-table-column label="数量" align="center" prop="qty" /> <el-table-column label="子任务状态" align="center" prop="status" min-width="180" > <template slot-scope="scope"> <el-button size="mini" type="primary" round>{{ taskStatusFormat(scope.row, scope.column) }}</el-button> </template> </el-table-column> <el-table-column label="更新用户" align="center" prop="lastUpdatedBy" :show-overflow-tooltip="true" /> </el-table> <pagination v-show="detailTotal > 0" :total="detailTotal" :page.sync="queryDetailParams.pageNum" :limit.sync="queryDetailParams.pageSize" @pagination="getDetailList" /> </el-tab-pane> </el-tabs> <print-task-dialog :showprint.sync="showPrint" :printlist="printList" /> </div> </template> <script> import { listTaskHeader, cancelTaskHeader, completeTaskByWMS, taskExecute, taskDetail, } from "@/api/task/taskHeader"; export default { name: "ListTask", data() { return { show: false, multiple: true, headerLoading: true, detailLoading: true, headerTotal: 0, detailTotal: 0, headerList: null, detailList: null, activeName: "first", // 任务类型数据字典 taskTypeOptions: [], // 任务状态数据字典 taskStatusOptions: [], headerDateRange: [], showHeaderSearch: true, showDetailSearch: true, showPrint: false, printList: [], queryHeaderParams: { pageNum: 1, pageSize: 10, id: undefined, internalTaskType: 500, containerCode: undefined, fromLocation: undefined, toLocation: undefined, }, queryDetailParams: { taskId: undefined, pageNum: 1, pageSize: 10, }, }; }, created() { this.getHeaderList(); this.getDicts("taskType").then((response) => { this.taskTypeOptions = response.data; }); this.getDicts("taskStatus").then((response) => { this.taskStatusOptions = response.data; }); }, methods: { getHeaderList() { this.headerLoading = true; listTaskHeader( this.addDateRange(this.queryHeaderParams, this.headerDateRange) ).then((response) => { this.headerList = response.rows; this.headerTotal = response.total; this.headerLoading = false; }); }, // 任务类型字典翻译 taskTypeFormat(row, column) { return this.selectDictLabel(this.taskTypeOptions, row.taskType); }, // 任务状态字典翻译 taskStatusFormat(row, column) { return this.selectDictLabel(this.taskStatusOptions, row.status); }, headerQuery() { this.queryHeaderParams.pageNum = 1; this.getHeaderList(); }, headerPrint() { this.showPrint = true; }, resetHeaderQuery() { this.headerDateRange = []; this.resetForm("queryHeaderForm"); this.headerQuery(); }, headerSelectionChange(selection) { this.multiple = !selection.length; let printList = []; selection.forEach((item) => { taskDetail({ taskId: item.id }).then((response) => { printList.push(response); }); }); this.printList = printList; }, // 主表明细按钮操作 detail(row) { this.queryDetailParams.taskId = row.id; this.activeName = "second"; this.getDetailList(); }, /** 执行按钮操作 */ execute(row) { const id = row.id; this.$confirm('是否确认执行任务id为"' + id + '"的数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(function () { return taskExecute(id); }) .then(() => { this.getHeaderList(); this.msgSuccess("执行任务成功"); }); }, /** 取消按钮操作 */ remove(row) { const id = row.id; this.$confirm('是否确认取消任务id为"' + id + '"的数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(function () { return cancelTaskHeader(id); }) .then(() => { this.getHeaderList(); this.msgSuccess("取消任务成功"); }); }, /** 完成按钮操作 */ complete(row) { const id = row.id; this.$confirm('是否确认完成任务id为"' + id + '"的数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(function () { return completeTaskByWMS(id); }) .then(() => { this.getHeaderList(); this.msgSuccess("完成任务成功"); }); }, /** 查询上架任务明细列表 */ getDetailList() { this.detailLoading = true; taskDetail(this.queryDetailParams).then((response) => { this.detailList = response.rows; this.detailTotal = response.total; this.detailLoading = false; }); }, }, }; </script>