sen-yu-new-web/src/views/reportForms/pro-progress-report.vue

<template>
  <!-- 生产进度报表 -->
  <div id="proProgressReport">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="销售订单号">
                <a-input placeholder="请输入销售订单号" v-model="queryParam.CSOCode"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="部门">
                <a-input placeholder="请输入部门" v-model="queryParam.CDepName"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="物料名称">
                <a-input placeholder="请输入物料名称" v-model="queryParam.CInvName"></a-input>
              </a-form-item>
            </a-col>

            <template v-if="toggleSearchStatus">
              <a-col :md="6" :sm="8">
                <a-form-item label="成衣加工厂">
                  <a-input placeholder="请输入物料名称" v-model="queryParam.CDefine12"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="业务员">
                  <a-input placeholder="请输入业务员" v-model="queryParam.CPersonName"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="计划单号">
                  <a-input placeholder="请输入计划单号" v-model="queryParam.planCode"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="订单日期" has-feedback>
                  <a-date-picker
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    placeholder="请选择订单日期"
                    v-model="queryParam.DDate"
                    @change="onDateChange"
                  ></a-date-picker>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="颜色">
                  <a-input placeholder="请输入颜色" v-model="queryParam.color"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="交期">
                   <a-range-picker
                  :placeholder="['开始时间', '结束时间']"
                  format="YYYY-MM-DD"
                  style="width: 100%"
                  v-model="preDeliveryDate"
                  @change="deliveryDateChange"
                />
                </a-form-item>
              </a-col>
              <!-- <a-col :md="6" :sm="8">
                <a-form-item label="账套号">
                  <a-input placeholder="请输入账套号" v-model="queryParam.accId"></a-input>
                </a-form-item>
              </a-col> -->
            </template>

            <!-- 重置 -->
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- table区域  -->
    <a-card :bordered="false" style="marginTop:10px;">
      <a-table
        bordered
        rowKey="id"
        :columns="proProgressColumns"
        :data-source="proProgressData"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 1500 }"
        @change="handleTableChange"
      >
        <!-- 销售订单号  链接-->
        <span slot="csocode" slot-scope="text">
          <a>{{ text }}</a>
        </span>

        <!-- 图片 弹框-->
        <span slot="imageslot">
          <a>查看</a>
        </span>
      </a-table>
    </a-card>

    <!-- 单个订单报表 抽屉 -->
    <salesOrderDetails-drawer ref="salesOrderDetailsDrawer" @ok="modalFormOk"></salesOrderDetails-drawer>
    <imgModal ref="imgdetal"></imgModal>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import salesOrderDetailsDrawer from '@views/reportForms/pro-progress-report/salesOrderDetailsDrawer.vue'
import imgModal from '@views/reportForms/full-rate-table/progtressImg.vue'
import { proProgressList, getImg } from '@api/reportForms/pro-progress-report.js'

export default {
  name: 'ProProgressReport', // 生产进度报表
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, salesOrderDetailsDrawer,imgModal },

  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />

    return {
      description: '生产进度报表',
      // 表头
      proProgressColumns: [
        {
          title: '销售订单号',
          width: 310,
          fixed: 'left',
          align: 'left',
          dataIndex: 'csocode',
          className: 'replacecolor',
          customCell: this.showDrawer,
          scopedSlots: { customRender: 'csocode' }
        },
        {
          title: '部门',
          width: 100,
          dataIndex: 'cdepName',
          fixed: 'left',
          className: 'replacecolor'
        },
        { title: '业务员', width: 90, fixed: 'left', dataIndex: 'cpersonName', className: 'replacecolor' },

        { title: '计划单号', width: 280, dataIndex: 'planCode', align: 'left', className: 'replacecolor' },
        {
          title: '成衣加工厂',
          width: 220,
          dataIndex: 'cdefine12',
          className: 'replacecolor'
        },
        { title: '物料编码', width: 220, dataIndex: 'cinvCode', className: 'replacecolor' },
        {
          title: '物料名称',
          width: 320,
          dataIndex: 'cinvName',
          align: 'left',
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        },
        { title: '款号', width: 160, dataIndex: 'itemNumber', align: 'left', className: 'replacecolor' },
        {
          title: '颜色',
          width: 220,
          dataIndex: 'color',
          align: 'left',
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        },
        // {
        //   title: '创建时间',
        //   dataIndex: 'createTime',
        //   align: 'center',
        //   sorter: true,
        //   customRender: text => {
        //     return moment(text).format('YYYY-MM-DD')
        //   }
        // },
        {
          title: '交期',
          width: 120,
          dataIndex: 'dpreDateBT',
          customRender: text => {
            return moment(text).format('YYYY-MM-DD')
          },
          className: 'replacecolor'
        },
        { title: '订单数量', width: 180, dataIndex: 'iquantity', className: 'replacecolor' },
        { title: '单价(原币)', width: 180, dataIndex: 'itaxUnitPrice', className: 'replacecolor' },
        { title: '总额(原币)', width: 140, dataIndex: 'totalSum', className: 'replacecolor' },
        { title: '单价(本币)', width: 180, dataIndex: 'bbPrice', className: 'replacecolor' },
        { title: '总额(本币)', width: 140, dataIndex: 'inatSum', className: 'replacecolor' },
        { title: '实际发票成本', width: 160, dataIndex: 'icostsum', className: 'replacecolor' },
        { title: '已出库数量', width: 160, dataIndex: 'foutquantity', className: 'replacecolor' },
        { title: '累计开票数量', width: 180, dataIndex: 'ikpquantity', className: 'replacecolor' },
        {
          title: '图片',
          width: 90,
          dataIndex: 'image',
          customCell: this.picShow,
          fixed: 'right',
          className: 'replacecolor',
          scopedSlots: { customRender: 'imageslot' }
        },
        { title: '附件', width: 120, dataIndex: 'accessory', fixed: 'right', className: 'replacecolor' }
      ],
      proProgressData: [], //生产进度数据
      loading: false, // 表格加载
      pagination: {
        // total: '',
        // current: 0,
        // pageSize: 0
      },
      preDeliveryDate:[],
      // 查询条件
      queryParam: {
        // pageNo: '',
        // csocode: '', // 销售订单号
        // cdepName: '', // 部门
        // cinvName: '',
        // cdefine12: '', // 成衣加工厂
        // cpersonName: '',
        // planCode: '', // 计划单号
        // dDate: '',
        // color: '',
        // dPreDateBT: '' // 交期
        // accId:'903'
      }
    }
  },
  created() {
    // this.getproProgressList()
  },
  methods: {
    // 分页查询 生产进度列表
    getproProgressList() {
      this.$nextTick(() => {
        proProgressList(this.queryParam).then(res => {
          if (res.success) {
            this.proProgressData = res.result.records
            console.log('生产进度列表页', this.proProgressData)
            this.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }
        })
      })
    },
    // 【销售订单号】 抽屉
    showDrawer(record) {
      return {
        on: {
          click: event => {
            this.$refs.salesOrderDetailsDrawer.visible = true
            this.$refs.salesOrderDetailsDrawer.record = record //接口参数,获取（主表 + 所有页签信息）
            this.$refs.salesOrderDetailsDrawer.getDetails()
            // console.log('【列表页 点击的销售订单对象】', this.$refs.salesOrderDetailsDrawer.record)
          }
        }
      }
    },

    // 图片 查看
    picShow(record) {
      return {
        on: {
          click: event => {
           // console.log('【查看】的图片ID', record.pictureId)
           if( record.pictureId == null ||  record.pictureId=='undefined' ||  record.pictureId == ""){
            this.$message.error("没有找到图片！");
            return;
           }
            this.$nextTick(() => {
              getImg({ pictureId: record.pictureId }).then(res => {
               // console.log('数据：', res[0].picture)
                this.$refs.imgdetal.visible = true
                this.$refs.imgdetal.dd = res[0].picture
              })
            })

            // this.$refs.salesOrderDetails.visible = true
          }
        }
      }
    },
    // 查询
    searchQuery() {
      this.queryParam.pageNo = ''
      if(this.preDeliveryDate.length==0){
        this.$message.error('请选择交期！');
      }else if(this.preDeliveryDate.length ==2){
            var separator = "-"; //日期分隔符  
            var startDates = this.queryParam.dPreDateB.split(separator);  
            var endDates = this.queryParam.dPreDateE.split(separator);  
            var startDate = new Date(startDates[0], startDates[1]-1, startDates[2]);  
            var endDate = new Date(endDates[0], endDates[1]-1, endDates[2]);  
            var timeInterval= parseInt(Math.abs(endDate - startDate ) / 1000 / 60 / 60 /24) + 1;
            if(timeInterval > 31){
             this.$message.error('交期区间超过31天，请重新选择！');
            }else { 
              this.getproProgressList()
             
           }       
         }else{
            this.getproProgressList()
         }
    },
    searchReset() {
      this.queryParam = {}
      // this.queryParam.accId='903'
      this.preDeliveryDate = []
      this.proProgressData =[]
      // this.getproProgressList()
    },

    // 分页变化时触发
    handleTableChange(pagination, filters, sorter) {
      this.queryParam.pageNo = pagination.current
      this.getproProgressList()
    },
    // 查询条件 订单日期转换成字符串并赋值
    onDateChange(value, dateString) {
      this.queryParam.DDate = dateString
      this.queryParam.DPreDateBT = dateString
    },
    deliveryDateChange(value, dateString) {
      this.queryParam.dPreDateB = dateString[0]
      this.queryParam.dPreDateE = dateString[1]
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }
</style>