<template>
    <div class="app-container">
      <el-form :model="queryParams" @submit.native.prevent ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="销售订单" prop="salesVoucher">
          <el-input
            v-model="queryParams.salesVoucher"
            placeholder="请输入销售订单"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="订单项次" prop="salesVoucherItem">
          <el-input
            v-model="queryParams.salesVoucherItem"
            placeholder="请输入订单项次"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="工单号" prop="workorderCodes">
          <el-input
            v-model="queryParams.workorderCodes"
            placeholder="请输入工单号"
            type="textarea"
            :rows="2"
            resize="none"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="编排单号" prop="arrangeCodes">
          <el-input
            v-model="queryParams.arrangeCodes"
            placeholder="请输入编排单号"
            type="textarea"
            :rows="2"
            resize="none"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        
        <el-form-item label="条码" prop="barcode">
          <el-input
            v-model="queryParams.barcode"
            placeholder="请输入条码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="daterangePurchaseDate"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否入库" prop="warehouse">
          <el-select v-model="queryParams.warehouse" style="width:220px;" placeholder="请选择是否入库" clearable>
            <el-option label="是" value="2" />
            <el-option label="否" value="1" />
        </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['mes:wm:issueheader:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="tbodys" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="销售订单" align="center" width="150px" prop="salesVoucher" >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleView(scope.row)"
            >{{scope.row.salesVoucher}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="订单项次" align="center" prop="salesVoucherItem" />
        <el-table-column label="编排单号" align="center" prop="arrangeCode" />
        <el-table-column label="工单号" align="center" prop="workorderCode" />
        <el-table-column label="条码" align="center" prop="barcode" />
        <el-table-column label="入库时间" align="center" prop="warehouseTime" />
        <el-table-column label="产品编码" align="center" prop="productCode" />
        <el-table-column label="产品名称" align="center" prop="productName" />
        <el-table-column label="数量" align="center" prop="quantity" />
        <el-table-column label="装箱码" align="center" prop="boxCode" />
        <el-table-column label="SIZE明细" align="center" prop="boxCode" >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleViewSIZE(scope.row)"
            >SIZE明细</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!-- 添加或修改生产领料单头对话框 -->
      <el-dialog :title="title" :visible.sync="openSIZE" width="960px" append-to-body>
        <el-card shadow="always" class="box-card">
          <Issueline ref="line" :sizeItems="sizeItems"></Issueline>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
        <el-form ref="form" :model="form"  label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="工作中心" prop="workstation_name">
                    <el-input v-model="form.workstation_name" placeholder="" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工作单元" prop="workunit_name">
                    <el-input v-model="form.workunit_name" placeholder="" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="报工人员" prop="create_by">
                    <el-input v-model="form.create_by" placeholder="" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="标准工时" prop="std_working_time">
                    <el-input v-model="form.std_working_time" placeholder="" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="实际工时" prop="machine_time">
                    <el-input v-model="form.machine_time" placeholder="" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="报工时间" prop="create_time">
                    <el-date-picker clearable
                        v-model="form.create_time"
                        disabled
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="">
                    </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
        </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { getplbl } from "@/api/mes/proTable/productSee";
  import {getTreeList} from "@/api/mes/wm/warehouse"
  import dayjs from 'dayjs'
  import Issueline from "./line.vue";
  export default {
    name: "Issueheader",
    dicts: ['mes_order_status'],
    components: {Issueline},
    data() {
      return {
        warehouseInfo:[],
        warehouseOptions:[],
        warehouseProps:{
          multiple: false,
          value: 'pId',
          label: 'pName',
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 生产领料单头表格数据
        tbodys: [],
  
        daterangePurchaseDate: [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openSIZE: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          warehouse: null,
          issueCode: null,
          issueName: null,
          workstationId: null,
          workstationCode: null,
          workorderId: null,
          workorderCode: null,
          taskId: null,
          taskCode: null,
          locationId: null,
          locationCode: null,
          locationName: null,
          areaId: null,
          areaCode: null,
          areaName: null,
          issueDate: null,
          salesVoucher: null,
          workorderCodes: null,
          arrangeCodes: null,
          salesVoucherItem: null,
          barcode: null
        },
        sizeItems: [],
        // 表单参数
        form: {
            feedback: {},
            sizeItems: []
        }
      };
    },
    created() {
      this.getList();
      this.getWarehouseList();
    },
    methods: {
      /** 查询生产领料单头列表 */
      getList() {
        this.loading = true;
        this.queryParams.params = {};
        if (null != this.daterangePurchaseDate && '' != this.daterangePurchaseDate) {
          this.queryParams.params["beginPurchaseDate"] = this.daterangePurchaseDate[0];
          this.queryParams.params["endPurchaseDate"] = this.daterangePurchaseDate[1];
        }
        const params = {
          ...this.queryParams,
          workorderCodes: this.queryParams.workorderCodes ? this.queryParams.workorderCodes.split(/[\n,;，、；。]/).filter(item => item) : null,
          arrangeCodes: this.queryParams.arrangeCodes ? this.queryParams.arrangeCodes.split(/[\n,;，、；。]/).filter(item => item) : null,
        }
        getplbl(params).then(response => {
          this.tbodys = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getWarehouseList(){
        getTreeList().then( response =>{
          if(response.data){
            this.warehouseOptions = response.data.filter((el) =>{
                return el.warehouseCode.indexOf('VIR') == -1;
            });;
          }
          this.warehouseOptions.map(w =>{
            w.children.map(l =>{
                    let lstr =JSON.stringify(l.children).replace(/locationId/g,'lId').replace(/areaId/g, 'pId').replace(/areaName/g,'pName');
                    l.children = JSON.parse(lstr);
            });
            let wstr = JSON.stringify(w.children).replace(/warehouseId/g,'wId').replace(/locationId/g, 'pId').replace(/locationName/g,'pName');
            w.children =  JSON.parse(wstr);
          });
          let ostr=JSON.stringify(this.warehouseOptions).replace(/warehouseId/g,'pId').replace(/warehouseName/g, 'pName');
          this.warehouseOptions = JSON.parse(ostr);
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.openSIZE = false
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          issueId: null,
          issueCode: null,
          issueName: null,
          workstationId: null,
          workstationCode: null,
          workstationName: null,
          workorderId: null,
          workorderCode: null,
          workorderName: null,
          clientId:null,
          clientCode:null,
          clientName:null,
          taskId: null,
          taskCode: null,
          warehouseId: null,
          warehouseCode: null,
          warehouseName: null,
          locationId: null,
          locationCode: null,
          locationName: null,
          areaId: null,
          areaCode: null,
          areaName: null,
          issueDate: new Date(),
          remark: null,
          attr1: null,
          attr2: null,
          attr3: null,
          attr4: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          salesVoucher: null,
          workorderCodes: null,
          arrangeCodes: null,
          salesVoucherItem: null,
          barcode: null,
          feedback: {
            workstation_name: '',
            workunit_name: '',
            create_by: '',
            std_working_time: '',
            machine_time: '',
            create_time: ''
          },
          sizeItems: []
        };
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangePurchaseDate = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.recordId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
       // 查询明细按钮操作
      handleViewSIZE(row){
        if (!row.sizeItems) {
            this.sizeItems = []
        } else {
            this.sizeItems = row.sizeItems
        }
        this.openSIZE = true;
        this.title = "查看SIZE明细";
      },
      handleView(row){
        if (!row.feedback) {
            this.form = {
            workstation_name: '',
            workunit_name: '',
            create_by: '',
            std_working_time: '',
            machine_time: '',
            create_time: ''
          }
        } else {
            this.form = row.feedback
        }
        this.open = true;
        this.title = "查看";
      },
      /** 导出按钮操作 */
      handleExport() {
        let params = {}
        if (this.ids && this.ids.length > 0) {
            params['recordIds'] = this.ids.join(',')
        } else {
            this.queryParams.params = {};
            if (null != this.daterangePurchaseDate && '' != this.daterangePurchaseDate) {
            this.queryParams.params["beginPurchaseDate"] = this.daterangePurchaseDate[0];
            this.queryParams.params["endPurchaseDate"] = this.daterangePurchaseDate[1];
            }
            params = {
            ...this.queryParams,
            workorderCodes: this.queryParams.workorderCodes ? this.queryParams.workorderCodes.split(/[\n,;，、；。]/).filter(item => item) : null,
            arrangeCodes: this.queryParams.arrangeCodes ? this.queryParams.arrangeCodes.split(/[\n,;，、；。]/).filter(item => item) : null,
            }
        }
        this.download2('report/pro/tracedback/export', {
          params: params
        }, `tracedback_${new Date().getTime()}.xlsx`)
      }
    }
  };
  </script>
  