|
@@ -1,68 +1,56 @@
|
|
|
<template>
|
|
|
<a-card size="small" :bordered="false" class="receivedSendStorageReport-wrap">
|
|
|
<div ref="tableSearch" class="table-page-search-wrapper newTableSearchName">
|
|
|
- <a-form layout="inline">
|
|
|
+ <a-form-model
|
|
|
+ layout="inline"
|
|
|
+ ref="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ :model="form">
|
|
|
<a-row :gutter="15">
|
|
|
<a-col :md="5" :sm="24">
|
|
|
- <a-form-item label="选择月份">
|
|
|
+ <a-form-model-item label="选择月份" prop="time">
|
|
|
<div class="monthBox" style="display:flex;align-item:center;">
|
|
|
<a-month-picker
|
|
|
- v-model="startMonthVal"
|
|
|
:disabled-date="disabledStartDate"
|
|
|
format="YYYY-MM"
|
|
|
placeholder="开始月份"
|
|
|
@openChange="handleStartOpenChange"
|
|
|
+ @change="getStartDate"
|
|
|
/>
|
|
|
<span>~</span>
|
|
|
<a-month-picker
|
|
|
- v-model="endMonthVal"
|
|
|
:disabled-date="disabledEndDate"
|
|
|
format="YYYY-MM"
|
|
|
placeholder="结束月份"
|
|
|
:open="endOpen"
|
|
|
@openChange="handleEndOpenChange"
|
|
|
+ @change="getEndDate"
|
|
|
/>
|
|
|
</div>
|
|
|
- <!-- <a-range-picker
|
|
|
- :placeholder="['开始月份', '结束月份']"
|
|
|
- format="YYYY-MM"
|
|
|
- :value="monthVal"
|
|
|
- :ranges="{'上月':[moment().add(-1, 'M'),moment().add(-1, 'M')], '本月': [moment(), moment().endOf('month')] }"
|
|
|
- :disabled-date="disabledDate"
|
|
|
- :mode="['month', 'month']"
|
|
|
- @panelChange="handlePanelChange"
|
|
|
- @change="handleChange"
|
|
|
- >
|
|
|
- <template slot="renderExtraFooter">
|
|
|
- <a-button type="primary">
|
|
|
- 确定
|
|
|
- </a-button>
|
|
|
- </template>
|
|
|
- </a-range-picker> -->
|
|
|
- </a-form-item>
|
|
|
+ </a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :md="5" :sm="24">
|
|
|
- <a-form-item label="产品名称">
|
|
|
- <a-input id="receivedSendStorageReport-name" v-model.trim="queryParam.name" allowClear placeholder="请输入产品名称"/>
|
|
|
- </a-form-item>
|
|
|
+ <a-form-model-item label="产品名称">
|
|
|
+ <a-input id="receivedSendStorageReport-name" v-model.trim="queryParam.productName" allowClear placeholder="请输入产品名称"/>
|
|
|
+ </a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :md="4" :sm="24">
|
|
|
- <a-form-item label="产品编码">
|
|
|
- <a-input id="receivedSendStorageReport-queryWord" v-model.trim="queryParam.queryWord" allowClear placeholder="请输入产品编码"/>
|
|
|
- </a-form-item>
|
|
|
+ <a-form-model-item label="产品编码">
|
|
|
+ <a-input id="receivedSendStorageReport-queryWord" v-model.trim="queryParam.productCode" allowClear placeholder="请输入产品编码"/>
|
|
|
+ </a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :md="5" :sm="24">
|
|
|
- <a-form-item label="产品品牌">
|
|
|
+ <a-form-model-item label="产品品牌">
|
|
|
<ProductBrand id="receivedSendStorageReport-productBrandSn" v-model="queryParam.productBrandSn"></ProductBrand>
|
|
|
- </a-form-item>
|
|
|
+ </a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :md="5" :sm="24">
|
|
|
- <a-form-item label="产品分类">
|
|
|
+ <a-form-model-item label="产品分类">
|
|
|
<productTypeAll placeholder="请选择产品分类" @change="changeProductType" v-model="productType" id="receivedSendStorageReport-productType"></productTypeAll>
|
|
|
- </a-form-item>
|
|
|
+ </a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :md="24" :sm="24" style="margin-bottom: 10px;display:flex;align-item:center;justify-content:center;">
|
|
|
- <a-button type="primary" @click="searchForm" :disabled="disabled" id="receivedSendStorageReport-refresh">查询</a-button>
|
|
|
+ <a-button type="primary" @click="handleSearch" :disabled="disabled" id="receivedSendStorageReport-refresh">查询</a-button>
|
|
|
<a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="receivedSendStorageReport-reset">重置</a-button>
|
|
|
<a-button
|
|
|
style="margin-left: 5px"
|
|
@@ -74,10 +62,10 @@
|
|
|
id="productInfoList-export">导出</a-button>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
- </a-form>
|
|
|
+ </a-form-model>
|
|
|
</div>
|
|
|
<div :style="{ height: tableHeight+84.5+'px' }">
|
|
|
- <a-tabs default-active-key="1">
|
|
|
+ <a-tabs default-active-key="1" @change="handleChange">
|
|
|
<a-tab-pane key="1" tab="明细">
|
|
|
<div class="detailCon">
|
|
|
<!-- 列表 -->
|
|
@@ -129,6 +117,8 @@ import { commonMixin } from '@/utils/mixin'
|
|
|
import ProductBrand from '@/views/common/productBrand.js'
|
|
|
import productTypeAll from '@/views/common/productTypeAll.js'
|
|
|
import { STable, VSelect } from '@/components'
|
|
|
+import { queryDetailReportPage } from '@/api/reportData'
|
|
|
+import { hdExportExcel, exportDetailReport, exportGroupByProductTypeReport, queryReportCount } from '@/libs/exportExcel'
|
|
|
import gatherList from './list'
|
|
|
import moment from 'moment'
|
|
|
export default {
|
|
@@ -139,19 +129,27 @@ export default {
|
|
|
return {
|
|
|
moment,
|
|
|
queryParam: {
|
|
|
- name: '',
|
|
|
- queryWord: '',
|
|
|
+ beginDate: undefined,
|
|
|
+ endDate: undefined,
|
|
|
+ productCode: '', // 产品编码
|
|
|
+ productName: '', // 产品名称
|
|
|
productBrandSn: undefined,
|
|
|
productTypeSn1: undefined,
|
|
|
productTypeSn2: undefined,
|
|
|
productTypeSn3: undefined
|
|
|
},
|
|
|
+ form: {
|
|
|
+ time: []
|
|
|
+ },
|
|
|
+ totalData: null,
|
|
|
+ tabVal: 1,
|
|
|
+ rules: {
|
|
|
+ time: [{ required: true, message: '请选择月份', trigger: 'change' }]
|
|
|
+ },
|
|
|
productType: undefined,
|
|
|
disabled: false,
|
|
|
tableHeight: 0,
|
|
|
endOpen: false,
|
|
|
- startMonthVal: undefined,
|
|
|
- endMonthVal: undefined,
|
|
|
columns: [
|
|
|
{ title: '产品编码', dataIndex: 'productCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
{ title: '产品名称', dataIndex: 'productName', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
@@ -172,10 +170,37 @@ export default {
|
|
|
{ title: '期末结存数量', dataIndex: 'salesNums', scopedSlots: { customRender: 'nums' }, width: '12%', align: 'center' },
|
|
|
{ title: '期末结存单价', dataIndex: 'productPrice', width: '12%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
|
|
|
{ title: '期末结存金额', dataIndex: 'productPrice', width: '12%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') }
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ this.disabled = true
|
|
|
+ const params = Object.assign(parameter, this.queryParam)
|
|
|
+ return queryDetailReportPage(params).then(res => {
|
|
|
+ let data
|
|
|
+ if (res.status == 200) {
|
|
|
+ data = res.data
|
|
|
+ data.map((item, index) => {
|
|
|
+ item.no = index + 1
|
|
|
+ })
|
|
|
+ this.getCount(params)
|
|
|
+ }
|
|
|
+ this.disabled = false
|
|
|
+ this.spinning = false
|
|
|
+ return data
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ getCount (params) {
|
|
|
+ queryReportCount(params).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.totalData = res.data
|
|
|
+ } else {
|
|
|
+ this.totalData = null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 选择月份限制
|
|
|
disabledStartDate (startValue) {
|
|
|
const endValue = this.endMonthVal
|
|
@@ -191,14 +216,24 @@ export default {
|
|
|
}
|
|
|
return endValue.valueOf() < startValue.valueOf() || endValue.valueOf() > this.moment().valueOf()
|
|
|
},
|
|
|
+ // 开始时间
|
|
|
handleStartOpenChange (open) {
|
|
|
if (!open) {
|
|
|
this.endOpen = true
|
|
|
}
|
|
|
},
|
|
|
+ getStartDate (date, dateString) {
|
|
|
+ this.form.time[0] = dateString
|
|
|
+ this.queryParam.beginDate = this.moment(dateString).startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
|
|
|
+ },
|
|
|
+ // 结束时间
|
|
|
handleEndOpenChange (open) {
|
|
|
this.endOpen = open
|
|
|
},
|
|
|
+ getEndDate (date, dateString) {
|
|
|
+ this.form.time[1] = dateString
|
|
|
+ this.queryParam.endDate = this.moment(dateString).endOf('month').format('YYYY-MM-DD') + ' 59:59:59'
|
|
|
+ },
|
|
|
|
|
|
// 产品分类 change
|
|
|
changeProductType (val, opt) {
|
|
@@ -206,14 +241,54 @@ export default {
|
|
|
this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
|
|
|
this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
|
|
|
},
|
|
|
+ handleChange (val) {
|
|
|
+ this.tabVal = val
|
|
|
+ },
|
|
|
+ // 导出
|
|
|
handleExport () {
|
|
|
-
|
|
|
+ const _this = this
|
|
|
+ const params = this.queryParam
|
|
|
+ this.exportLoading = true
|
|
|
+ this.spinning = true
|
|
|
+ if (this.tabVal == 1) {
|
|
|
+ hdExportExcel(exportDetailReport, params, '进销存明细报表', function () {
|
|
|
+ _this.exportLoading = false
|
|
|
+ _this.spinning = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ hdExportExcel(exportGroupByProductTypeReport, params, '进销存明细报表', function () {
|
|
|
+ _this.exportLoading = false
|
|
|
+ _this.spinning = false
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
- searchForm () {
|
|
|
- console.log('1111:', this.startMonthVal)
|
|
|
+ // 查询
|
|
|
+ handleSearch () {
|
|
|
+ const _this = this
|
|
|
+ if (this.form.time.length != 2) {
|
|
|
+ _this.$message.error('请选择月份')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ _this.$refs.table.refresh(true)
|
|
|
+ } else {
|
|
|
+ _this.$message.error('请选择月份')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
+ // 重置
|
|
|
resetSearchForm () {
|
|
|
-
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
+ this.queryParam.productCode = undefined
|
|
|
+ this.queryParam.productName = undefined
|
|
|
+ this.queryParam.productBrandSn = undefined
|
|
|
+ this.queryParam.productType = undefined
|
|
|
+ this.queryParam.productTypeSn1 = undefined
|
|
|
+ this.queryParam.productTypeSn2 = undefined
|
|
|
+ this.queryParam.productTypeSn3 = undefined
|
|
|
+ this.$refs.table.clearTable()
|
|
|
},
|
|
|
pageInit () {
|
|
|
const _this = this
|
|
@@ -227,7 +302,15 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
- this.pageInit()
|
|
|
+ if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
|
|
|
+ this.pageInit()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated () {
|
|
|
+ // 如果是新页签打开,则重置当前页面
|
|
|
+ if (this.$store.state.app.isNewTab) {
|
|
|
+ this.pageInit()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|