hitch-sb-antd/src/views/report/daily/DayReport.vue

<template>
  <div class="container">
    <div class="title">
      <div class="time">
        <a-space>
          <a-date-picker v-model="queryParams.dateStart" :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN" @change="onDateChange">
            <span class="date">
              <a-icon type="calendar" theme="filled" /> {{ BaseTool.Date.formatter(queryParams.dateStart,BaseTool.Date.PICKER_NORM_DATE_PATTERN) }}
            </span>
          </a-date-picker>
          ~
          <a-date-picker v-model="queryParams.dateEnd" :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN" @change="onDateChange">
            <span class="date">
              <a-icon type="calendar" theme="filled" /> {{ BaseTool.Date.formatter(queryParams.dateEnd,BaseTool.Date.PICKER_NORM_DATE_PATTERN) }}
            </span>
          </a-date-picker>
        </a-space>
      </div>
      <div>时代思康新材料有限公司 用存日报表填报</div>
      <a-button
        style="margin-left: 8px"
        v-if="$auth('produce-reports-export')"
        type="primary"
        icon="download"
        @click="doExport">导出
      </a-button>
    </div>
    <a-table size="small" bordered :columns="columns" :data-source="data">
      <template #yjh902="text,record">
        <div @dblclick="handleEdit(record, 'yjh902')"> {{ text }} </div>
      </template>
      <template #yjh977="text,record">
        <div @dblclick="handleEdit(record, 'yjh977')"> {{ text }} </div>
      </template>
      <template #yjh977Xl="text,record">
        <div @dblclick="handleEdit(record, 'yjh977Xl')"> {{ text }} </div>
      </template>
      <template #lhn="text,record">
        <div @dblclick="handleEdit(record, 'lhn')"> {{ text }} </div>
      </template>
      <template #lhnYjh="text,record">
        <div @dblclick="handleEdit(record, 'lhnYjh')"> {{ text }} </div>
      </template>
      <template #lz="text,record">
        <div @dblclick="handleEdit(record, 'lz')"> {{ text }} </div>
      </template>
      <template #lzYjh="text,record">
        <div @dblclick="handleEdit(record, 'lzYjh')"> {{ text }} </div>
      </template>
      <template #fhnYjh="text,record">
        <div @dblclick="handleEdit(record, 'fhnYjh')"> {{ text }} </div>
      </template>
      <template #stockLhn="text,record">
        <div @dblclick="handleEdit(record, 'stockLhn')"> {{ text }} </div>
      </template>
      <template #stockLz="text,record">
        <div @dblclick="handleEdit(record, 'stockLz')"> {{ text }} </div>
      </template>
      <template #gas="text,record">
        <div @dblclick="handleEdit(record, 'gas')"> {{ text }} </div>
      </template>
      <template #steam="text,record">
        <div @dblclick="handleEdit(record, 'steam')"> {{ text }} </div>
      </template>
      <template #riverWater="text,record">
        <div @dblclick="handleEdit(record, 'riverWater')"> {{ text }} </div>
      </template>
      <template #sewage="text,record">
        <div @dblclick="handleEdit(record, 'sewage')"> {{ text }} </div>
      </template>
    </a-table>
    <BaseForm ref="baseForm" @ok="handleOk" />
  </div>
</template>
<script>
import { exportTianProduceReport, queryTian, updateTian } from '@/api/produce/report'
import BaseForm from './modules/BaseForm'
export default {
  components: { BaseForm },
  data () {
    return {
      queryParams: {
        // dateStart: this.BaseTool.Moment().startOf('month'),
        dateStart: this.BaseTool.Moment().subtract(1, 'month'),
        dateEnd: this.BaseTool.Moment().subtract(1, 'days')
      },
      data: [],
      columns: [
        {
          title: '时间',
          dataIndex: 'date',
          key: 'date',
          align: 'center',
          width: 50
        },
        {
          title: '902(月计划产量)',
          dataIndex: 'yjh902',
          key: 'yjh902',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'yjh902' }
        },
        {
          title: 'CS-977(月计划产量)',
          dataIndex: 'yjh977',
          key: 'yjh977',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'yjh977' }
        },
        {
          title: 'CS-977(月计划销售)',
          dataIndex: 'yjh977Xl',
          key: 'yjh977Xl',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'yjh977Xl' }
        },
        {
          title: '氯化钠(当日销售)',
          dataIndex: 'lhn',
          key: 'lhn',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'lhn' }
        },
        {
          title: '氯化钠(月计划销售)',
          dataIndex: 'lhnYjh',
          key: 'lhnYjh',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'lhnYjh' }
        },
        {
          title: '锂渣(当日销售)',
          dataIndex: 'lz',
          key: 'lz',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'lz' }
        },
        {
          title: '锂渣(月计划销售)',
          dataIndex: 'lzYjh',
          key: 'lzYjh',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'lzYjh' }
        },
        {
          title: '氟化钠(月计划销售)',
          dataIndex: 'fhnYjh',
          key: 'fhnYjh',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'fhnYjh' }
        },
        {
          title: '氯化钠(库存)',
          dataIndex: 'stockLhn',
          key: 'stockLhn',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'stockLhn' }
        },
        {
          title: '锂渣(库存)',
          dataIndex: 'stockLz',
          key: 'stockLz',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'stockLz' }
        },
        {
          title: '天然气',
          dataIndex: 'gas',
          key: 'gas',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'gas' }
        },
        {
          title: '蒸汽',
          dataIndex: 'steam',
          key: 'steam',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'steam' }
        },
        {
          title: '河水',
          dataIndex: 'riverWater',
          key: 'riverWater',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'riverWater' }
        },
        {
          title: '污水',
          dataIndex: 'sewage',
          key: 'sewage',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'sewage' }
        }
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.queryParams = {
        dateStart: this.BaseTool.Date.formatter(this.queryParams.dateStart, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN),
        dateEnd: this.BaseTool.Date.formatter(this.queryParams.dateEnd, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
      }
      queryTian(this.queryParams).then((res) => {
        this.data = res.data
        // console.log(this.inProductList)
      })
    },
    onDateChange (value) {
      this.getData()
    },
    handleEdit (record, key) {
      this.$refs.baseForm.base(record, key)
    },
    doExport () {
      const parameter = {
        ...this.queryParams
      }
      exportTianProduceReport(parameter).then(file => {
        this.BaseTool.Util.downLoadExportExcel(file)
      })
    },
    handleOk (record) {
      updateTian(record).then((res) => {
        this.getData()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  background-color: #fff;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  padding: 20px;
  .title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    margin-bottom: 20px;
    .time {
      position: absolute;
      left: 20px;
      top: 0px;
      .date {
        font-size: 16px;
      }
    }
  }
}
</style>