<template>
  <div class="mod-config">
    <el-form :model="searchData" label-position="top" label-width="100px" style="width: 1800px;">
      <el-row :gutter="10">
        <el-col :span="2">
          <el-form-item :label="'工厂编码'">
            <el-input v-model="searchData.site" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item :label="'生产订单号'">
            <el-input v-model="searchData.orderNo" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item :label="'派工单号'">
            <el-input v-model="searchData.seqNo" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item :label="'操作员姓名'">
            <el-input v-model="searchData.operatorDesc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item >
            <span slot="label" style="" @click="getBaseList(5)"><a herf="#">产品编码</a></span>
            <el-input v-model="searchData.partNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item :label="'规格型号'">
            <el-input v-model="searchData.partSpec" ></el-input>
          </el-form-item>
        </el-col>
<!--      </el-row>-->
<!--      <el-row :gutter="10">-->
        <el-col :span="2">
          <el-form-item :label="'派工日期：'">
            <el-date-picker
              style="width: 100%"
              v-model="searchData.startDate"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item :label="'到：'">
            <el-date-picker
              style="width: 100%"
              v-model="searchData.endDate"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
<!--        <el-col :span="4">-->
<!--          <el-form-item label=" ">-->
<!--            <el-checkbox v-model="searchData.firstReportDate2Flag" true-label="Y" false-label="N">仅显示首次报工日期小于今天</el-checkbox>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="2">
          <el-form-item label=" ">
            <el-button @click="search()" type="primary">查询</el-button>
            <download-excel
              :fields="fields()"
              type="xls"
              :name="exportName"
              :fetch="createExportData"
              worksheet="导出信息"
              class="el-button el-button--primary el-button--medium">
              {{ '导出' }}
            </download-excel>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <el-table
      :height="height"
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        header-align="center"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 100, 500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
  import {
    getLiuhuaView,
  } from '@/api/production/generateReport.js'
  import Chooselist from '@/views/modules/common/Chooselist'

  export default {
    name: 'liuhuaProductView',
    components: {
      Chooselist
    },
    data () {
      return {
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        site: this.$store.state.user.site,
        // 导出+动态列 start
        exportData: [],
        userDev:this.$store.state.user.userDev,
        exportName: "半成品派工单追踪表"+this.getStrDate(),
        columnList: [
          {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "site",
            columnLabel: "工厂",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 40,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'left'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "seqNo",
            columnLabel: "派工单号",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 70,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'left'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "orderNo",
            columnLabel: "生产订单",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 140,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'left'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "operatorDesc",
            columnLabel: "操作员姓名",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'left'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "partSpec",
            columnLabel: "规格型号",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 120,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'left'
          },
          {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "firstReportDate2",
            columnLabel: "首次报工日期",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 100,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'center'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "qtyRequired",
            columnLabel: "派工数量",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 70,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "qtyReported",
            columnLabel: "报工数量",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 70,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "liuhuaWancheng",
            columnLabel: "硫化完成率",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "liuhuaTime",
            columnLabel: "硫化首次报工",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 130,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'center'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "xiubianWancheng",
            columnLabel: "修边完成率",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "xiubianTime",
            columnLabel: "修边首次报工",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 130,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'center'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "hongkaoWancheng",
            columnLabel: "烘烤完成率",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "hongkaoTime",
            columnLabel: "烘烤首次报工",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 130,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'center'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "jiagongWancheng",
            columnLabel: "加工完成率",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "jiagongTime",
            columnLabel: "加工首次报工",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 130,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'center'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "jianyanWancheng",
            columnLabel: "检验完成率",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "jianyanTime",
            columnLabel: "检验首次报工",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 130,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'center'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "baozhuangWancheng",
            columnLabel: "包装完成率",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "baozhuangTime",
            columnLabel: "包装首次报工",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 130,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'center'
          }, {
            tableId: "liuhuaView",
            tableName: this.$route.meta.title,
            columnProp: "liuhuahegelv",
            columnLabel: "硫化合格率",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: 'right'
          }
        ],
        visible:false,
        // 导出 end
        height: 200,
        tableData: [],
        exportList: [],
        searchData: {
          page: 1,
          limit: 20,
          site:'',
          operatorDesc:'',
          orderNo: '',
          partNo: '',
          partSpec:'',
          startDate:'',
          endDate:'',
          firstReportDate2Flag:'N',
          seqNo:'',
        },
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight - 240
      })
    },
    methods: {
      // 获取基础数据列表S
      getBaseList (val, type) {
        this.tagNo = val
        this.$nextTick(() => {
          let strVal = ''
          if (val === 24) {
            strVal = this.searchData.workCenterNo
          }
          if (val === 5) {
            strVal = this.searchData.partNo
          }
          if (val === 26) {
            strVal = this.searchData.operatorName
          }
          if (val === 88) {
            strVal = this.searchData.resourceId
          }
          this.$refs.baseList.init(val, strVal)
        })
      },
      /* 列表方法的回调 */
      getBaseData (val) {
        if (this.tagNo === 24) {
          this.searchData.workCenterNo = val.WorkCenterNo
        }  else if (this.tagNo === 5) {
          this.searchData.partNo = val.PartNo
        }
        if (this.tagNo === 26) {
          this.searchData.operatorName = val.OperatorName
        }
        if (this.tagNo === 88) {
          this.searchData.resourceId = val.ResourceID
        }
      },

      search() {
        if (this.searchData.site === ''&&this.searchData.orderNo === ''&&this.searchData.partNo === ''
          &&this.searchData.partSpec === ''&&this.searchData.startDate === ''&&this.searchData.endDate === ''
          &&this.searchData.seqNo === ''&&this.searchData.operatorDesc === ''){
          this.$alert('计算量过大，请至少填写一个筛选条件！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        this.searchData.limit = this.pageSize
        this.searchData.page = this.pageIndex
        getLiuhuaView(this.searchData).then(({data}) => {
          if (data.code == 0) {
            this.tableData = data.page.list
            this.pageIndex = data.page.currPage
            this.pageSize = data.page.pageSize
            this.totalPage = data.page.totalCount
          }
          this.dataListLoading = false
        })
      },

      // 导出+动态列
      fields() {
        let json = "{"
        this.columnList.forEach((item, index) => {
          if (index == this.columnList.length - 1) {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
          } else {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
          }
        })
        json += "}"
        let s = eval("(" + json + ")")
        return s
      },
      async createExportData() {
        // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
        this.searchData.limit = -1
        this.searchData.page = 1
        await getLiuhuaView(this.searchData).then(({data}) => {
          this.exportList= data.page.list;
        })

        return this.exportList;
      },
      getStrDate() {
        let dd = new Date();
        let Y = dd.getFullYear();
        let M = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1);//获取当前月份的日期，不足10补0
        let D = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();//获取当前几号，不足10补0
        let H = dd.getHours() < 10 ? "0" + dd.getHours() : dd.getHours();
        let MM = dd.getMinutes() < 10 ? "0" + dd.getMinutes() : dd.getMinutes();
        let S = dd.getSeconds() < 10 ? "0" + dd.getSeconds() : dd.getSeconds();
        return Y + M + D + H + MM + S;

      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.search()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.search()
      },
    },
    created () {
      // this.getTableUserColumn()
    }
  }
</script>

<style scoped>
  .input_left{
    text-align: left;
  }
  .input_reight{
    text-align: right;
  }
  /deep/ input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  input[type='number'] {
    -moz-appearance: textfield !important;
  }

</style>
