index.vue 11.8 KB
<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"
          @click="print"
         
        >打印</el-button>
      </el-col>
      <el-col :span="1.5">
            <el-button type="success" icon="el-icon-s-promotion" size="mini" :disabled="single" @click="batchExecute">批量执行</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-close" size="mini" :disabled="multiple" @click="batchRemoveHead">批量取消</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" width="360" class-name="small-padding fixed-width">
            <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" @click="execute(scope.row)">执行</el-button>
              <el-button size="mini" type="text" icon="el-icon-close" @click="remove(scope.row)">取消</el-button>
              <el-button size="mini" type="text" icon="el-icon-check" @click="complete(scope.row)">完成</el-button>
            </template>
          </el-table-column>
      <el-table-column label="任务id" align="center" prop="id" sortable width="100" />
      <el-table-column label="任务类型" align="center" prop="taskType">
      <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" width="130" />
      <el-table-column label="目的库位号" align="center" prop="toLocation" width="100" />
      <el-table-column label="容器号" align="center" prop="containerCode" sortable 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 width="100" />
      <el-table-column label="开始拣货时间" align="center" prop="startPickDateTime" width="180" sortable>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startPickDateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="截止拣货时间" align="center" prop="endPickDateTime" width="180" sortable>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endPickDateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生成时间" align="center" prop="created" width="180" sortable>
        <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" width="100" />
      <el-table-column label="修改时间" align="center" prop="lastUpdated" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastUpdated) }}</span>
        </template>
      </el-table-column> 
       <el-table-column label="更新用户" align="center" prop="lastUpdatedBy" />   
    </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">
   <el-row :gutter="10" class="mb8">
     
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showHeaderSearch" @queryTable="getHeaderList"></right-toolbar>
    </el-row>


    <el-table v-loading="detailLoading" :data="detailList" @selection-change="detailSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="明细ID" align="center" prop="id" />
      <el-table-column label="任务头ID" align="center" prop="taskId" sortable width="100" />
      <el-table-column label="单据编码" align="center" prop="billCode" />
      <el-table-column label="单据明细ID" align="center" prop="billDetailId" width="130" sortable />
      <el-table-column label="物料编码" align="center" prop="materialCode" />
      <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 width="100" />
      <el-table-column label="源库位" align="center" prop="fromLocation" sortable width="100" />
      <el-table-column label="目的库位" align="center" prop="toLocation" sortable width="100" /> 
      <el-table-column label="数量" align="center" prop="qty" />
      <el-table-column label="子任务状态" align="center" prop="status" width="100" />
      <el-table-column label="更新用户" align="center" prop="lastUpdatedBy" />          
    </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>


  export default {
    name:"QualityTask",
   
    data() {
      return {
       show: false,
       headerIds: [],
       detailIds: [],
       single: true,
       multiple:true,
       headerLoading: true,
       detailLoading: true,
       headerTotal: 0,
       detailTotal: 0,
      headerList: null,
      detailList:null,
      activeName: 'first',
      
      headerDateRange: [],
      detailDateRange: [],
      showHeaderSearch: true,
      showDetailSearch: true,
      
      queryHeaderParams: {
        pageNum: 1,
        pageSize: 10,
        id: undefined,
        containerCode: undefined,
        fromLocation: undefined,
        toLocation: undefined,  
      },
      queryDetailParams: {
        pageNum: 1,
        pageSize: 10,
        warehouseCode: undefined,
        cycleCountHeadCode: undefined,
        locationCode: undefined,
        containerCode: undefined,
        taskHeaderId: undefined,
        enableStatus: undefined,
        createdBy: undefined,
        
       
      },
      };
    },
      created() {
    getHeaderList();
    getDetailList();
    this.getDicts("taskType").then((response) => {
      this.taskTypeOptions = response.data;
    });
  },
    methods: {
     
    getHeaderList() {
      this.headerLoading = true;
      listHeader(this.addDateRange2(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);
    },
     headerQuery() {
      this.queryHeaderParams.pageNum = 1;
      this.getHeaderList();
    },
    headerAdd() {
      this.show=true
    },
    resetHeaderQuery() {
      this.headerDateRange = [];
      this.resetForm("queryHeaderForm");
      this.headerQuery();
    },
    transfer() {
      this.showtrans=true;
    },
    checkOut() {
      
    },
    emptyIn() {
      this.showInware=true;
    },
    emptyOut() {
      this.showOutware=true;
    },
    headerSelectionChange(selection) {
      this.headerIds = selection.map((item) => item.userId);
      this.multiple = !selection.length;
    },


      getDetailList() {
      this.detailLoading = true;
      listDetail(this.addDateRange2(this.queryDetailParams, this.dateRange)).then(
        (response) => {
          this.detailList = response.rows;
          this.detailTotal = response.total;
          this.detailLoading = false;
        }
      );
    },
     detailQuery() {
      this.queryDetailParams.pageNum = 1;
      this.getDetailList();
    },
    resetDetailQuery() {
      this.detailDateRange = [];
      this.resetForm("queryDetailForm");
      this.detailQuery();
    },
    detailSelectionChange(selection) {
      this.detailIds = selection.map((item) => item.userId);
      this.single = selection.length != 1;
    },
    
    }
  };
</script>
<style lang="scss">
// .el-icon-exchange{
//     background: url(../../../../../assets/images/exchange.png) center no-repeat;
//     background-size: cover;
//     font-size: 12px;
// }
// .el-icon-exchange:before{
//     content: "替";
//     visibility: hidden;
// }
// .el-icon-leveldown{
//     background: url(../../../../../assets/images/leveldown.png) center no-repeat;
//     background-size: cover;
//     font-size: 12px;
// }
// .el-icon-leveldown:before{
//     content: "替";
//     visibility: hidden;
// }
// .el-icon-levelup{
//     background: url(../../../../../assets/images/levelup.png) center no-repeat;
//     background-size: cover;
//     font-size: 12px;
// }
// .el-icon-levelup:before{
//     content: "替";
//     visibility: hidden;
// }
  
</style>