|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<!-- 订单内部统计表-->
|
|
|
- <div id="interiorStatistics">
|
|
|
+ <div id="externalStatistics">
|
|
|
<!-- 查询区域 -->
|
|
|
<a-card :bordered="false">
|
|
|
<div class="table-page-search-wrapper">
|
|
|
@@ -10,20 +10,21 @@
|
|
|
<a-form-item label="起始年月">
|
|
|
<a-range-picker
|
|
|
style="width: 100%"
|
|
|
- placeholder="['开始年月', '结束年月']"
|
|
|
+ :placeholder="['开始年月', '结束年月']"
|
|
|
format="YYYY-MM"
|
|
|
:mode="mode2"
|
|
|
:value="value"
|
|
|
@panelChange="handlePanelChange"
|
|
|
@change="monthChange"
|
|
|
+ required
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
|
|
|
<a-col :md="6" :sm="8">
|
|
|
<a-form-item label="部门">
|
|
|
- <a-input placeholder="请输入部门" v-model="queryParam.department"></a-input>
|
|
|
- <!-- <a-select placeholder="请选择部门" v-model="queryParam.department">
|
|
|
+ <a-input placeholder="请输入部门" v-model="queryParam.department" required></a-input>
|
|
|
+ <!-- <a-select placeholder="请选择部门" v-model="queryParam.">
|
|
|
<a-select-option :value="''">请选择</a-select-option>
|
|
|
<a-select-option :value="0">业务一部</a-select-option>
|
|
|
<a-select-option :value="1">业务二部</a-select-option>
|
|
|
@@ -34,11 +35,12 @@
|
|
|
<a-col :md="6" :sm="8">
|
|
|
<a-form-item label="客户">
|
|
|
<a-input placeholder="请输入客户" v-model="queryParam.customer"></a-input>
|
|
|
+
|
|
|
<!-- <a-select placeholder="请选择客户" v-model="queryParam.customer">
|
|
|
- <a-select-option :value="''">请选择</a-select-option>
|
|
|
- <a-select-option :value="0">FD</a-select-option>
|
|
|
- <a-select-option :value="1">PMK</a-select-option>
|
|
|
- </a-select> -->
|
|
|
+ <a-select-option :value="''">请选择</a-select-option>
|
|
|
+ <a-select-option :value="0">FD</a-select-option>
|
|
|
+ <a-select-option :value="1">PMK</a-select-option>
|
|
|
+ </a-select> -->
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
|
|
|
@@ -63,7 +65,7 @@
|
|
|
<a-card :bordered="false" style="marginTop:10px;">
|
|
|
<div class="chart">
|
|
|
<!-- 部门 "-->
|
|
|
- <div class="departmentChart" style="background:rgba(255, 165, 0,.08);">
|
|
|
+ <div class="departmentChart" style="background:rgba(255, 165, 0,.09);">
|
|
|
<departmentChart />
|
|
|
</div>
|
|
|
<!-- 客户 -->
|
|
|
@@ -73,13 +75,14 @@
|
|
|
</div>
|
|
|
</a-card>
|
|
|
|
|
|
- <!-- table rowKey="id" :scroll="{ x: 1500 }"-->
|
|
|
+ <!-- table :scroll="{ x: 1500 }" v-if="data"-->
|
|
|
<a-card :bordered="false" style="marginTop:10px;">
|
|
|
<a-table
|
|
|
+ v-if="intdata"
|
|
|
bordered
|
|
|
- :row-key="record => record.id"
|
|
|
- :columns="interiorColumns"
|
|
|
- :data-source="interiorData"
|
|
|
+ rowKey="index"
|
|
|
+ :columns="intColumns"
|
|
|
+ :data-source="intdata"
|
|
|
:loading="loading"
|
|
|
:pagination="pagination"
|
|
|
@change="handleTableChange"
|
|
|
@@ -94,20 +97,28 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
import moment from 'moment'
|
|
|
|
|
|
-import departmentChart from '@views/reportForms/order-statistics/chart/interior/departmentChart'
|
|
|
-import customerChart from '@views/reportForms/order-statistics/chart/interior/customerChart.vue'
|
|
|
+import departmentChart from '@views/reportForms/order-statistics/chart/external/departmentChart'
|
|
|
+import customerChart from '@views/reportForms/order-statistics/chart/external/customerChart.vue'
|
|
|
|
|
|
-// import { external } from '@api/reportForms/order-statistics.js'
|
|
|
+import { externalList } from '@api/reportForms/order-statistics.js'
|
|
|
|
|
|
export default {
|
|
|
- name: 'InteriorStatistics', // 订单内部统计表
|
|
|
+ name: 'ExternalStatistics', // 订单外部统计表
|
|
|
mixins: [JeecgListMixin],
|
|
|
components: { JEllipsis, moment, departmentChart, customerChart },
|
|
|
|
|
|
data() {
|
|
|
// let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
|
|
|
return {
|
|
|
- interiorColumns: [
|
|
|
+ intColumns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ width: 90,
|
|
|
+ dataIndex: 'index',
|
|
|
+ key: 'index',
|
|
|
+ customRender: (text, record, index) => `${index + 1}`,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
{
|
|
|
title: '部门',
|
|
|
width: 140,
|
|
|
@@ -158,89 +169,98 @@ export default {
|
|
|
},
|
|
|
{ title: '本币金额', width: 150, dataIndex: 'inatMoney', className: 'replacecolor' }
|
|
|
],
|
|
|
- interiorData: [
|
|
|
- {
|
|
|
- department: '业务八部',
|
|
|
- supplierType: '成衣厂',
|
|
|
- supplier: '国云森',
|
|
|
- planDeliveryMonth: '2021-04',
|
|
|
- priceInTax: '87.89',
|
|
|
- realQuantity: '90,120,0000',
|
|
|
- LocalMoney: '301,929,04'
|
|
|
- }
|
|
|
- ],
|
|
|
+ intdata: [],
|
|
|
loading: false, // 表格加载
|
|
|
|
|
|
// 查询条件
|
|
|
queryParam: {
|
|
|
vendorType: '内部',
|
|
|
- startYearMonth: '',
|
|
|
- endYearMonth: '',
|
|
|
- department: '',
|
|
|
- customer: ''
|
|
|
+ pageNo: ''
|
|
|
+ // startYearMonth: '',
|
|
|
+ // endYearMonth: '',
|
|
|
+ // department: '',
|
|
|
+ // customer: ''
|
|
|
},
|
|
|
+
|
|
|
pagination: {
|
|
|
// total: '', //总条数
|
|
|
// current: '', //当前页
|
|
|
// pageSize: '' //一页多少
|
|
|
},
|
|
|
mode2: ['month', 'month'],
|
|
|
- value: [], //起始月份
|
|
|
- dateFormat: 'YYYY-MM-DD'
|
|
|
+ value: [] //起始月份
|
|
|
+ // dateFormat: 'YYYY-MM-DD'
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ // html渲染出来后，操作dom
|
|
|
+ mounted() {
|
|
|
+ this.cancelLoading()
|
|
|
+ },
|
|
|
created() {
|
|
|
- this.getInteriorData()
|
|
|
+ this.getIntData() // 查询订单统计
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
- getInteriorData() {
|
|
|
+ cancelLoading() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查询订单内部统计
|
|
|
+ getIntData() {
|
|
|
this.$nextTick(() => {
|
|
|
- // external(this.queryParam).then(res => {
|
|
|
- // if (res.success) {
|
|
|
- // this.interiorData = res.result.records
|
|
|
- // console.log('订单外部列表', this.interiorData)
|
|
|
- // this.pagination = {
|
|
|
- // total: res.result.total,
|
|
|
- // current: 1,
|
|
|
- // pageSize: res.result.size
|
|
|
- // }
|
|
|
- // // console.log('分页器赋值:', this.pagination.total, this.pagination.current, this.pagination.pageSize)
|
|
|
- // }
|
|
|
- // })
|
|
|
+ externalList(this.queryParam).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ console.log('99')
|
|
|
+ this.intData = res.result.records
|
|
|
+ console.log('订单外部列表', this.intData)
|
|
|
+ this.pagination = {
|
|
|
+ total: res.result.total,
|
|
|
+ current: res.result.current,
|
|
|
+ pageSize: res.result.size
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+ searchQuery() {
|
|
|
+ this.queryParam.pageNo = ''
|
|
|
+ if (this.queryParam) {
|
|
|
+ console.log('指定查询条件,渲染chart', this.queryParam)
|
|
|
+ this.$refs.departmentChart.queryParam = this.queryParam
|
|
|
+ this.$refs.departmentChart.getDepChartData()
|
|
|
+ }
|
|
|
+ this.getIntData()
|
|
|
+ },
|
|
|
// 日期面板变化时的回调
|
|
|
handlePanelChange(value, mode) {
|
|
|
this.value = value
|
|
|
this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
|
|
|
- // console.log('this.mode2', this.mode2)
|
|
|
this.queryParam.startYearMonth = value[0].format('YYYY-MM')
|
|
|
this.queryParam.endYearMonth = value[1].format('YYYY-MM')
|
|
|
console.log('开始年月:', this.queryParam.startYearMonth)
|
|
|
console.log('结束年月:', this.queryParam.endYearMonth)
|
|
|
- setFieldsValue({
|
|
|
- timeRange: value
|
|
|
- })
|
|
|
},
|
|
|
|
|
|
// 时间发生变化的回调，发生在用户选择时间时
|
|
|
monthChange(value) {
|
|
|
this.value = value
|
|
|
- console.log('what------monthChange')
|
|
|
- },
|
|
|
- searchQuery() {
|
|
|
- this.getInteriorData()
|
|
|
+ // console.log('what------monthChange')
|
|
|
},
|
|
|
+
|
|
|
searchReset() {
|
|
|
this.queryParam = {}
|
|
|
this.value = [] //起始年月重置
|
|
|
- this.getInteriorData()
|
|
|
+ this.getIntData()
|
|
|
},
|
|
|
|
|
|
handleTableChange(pagination, filters, sorter) {
|
|
|
+ console.log('当前页信息>>>>', pagination)
|
|
|
this.queryParam.pageNo = pagination.current
|
|
|
- this.getInteriorData()
|
|
|
+ this.getIntData()
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
|
@@ -262,6 +282,14 @@ export default {
|
|
|
// /deep/ th.replacecolor {
|
|
|
// background-color: #ccc;
|
|
|
// }
|
|
|
+
|
|
|
+.departmentChart,
|
|
|
+.customerChart {
|
|
|
+ // width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
.departmentChart {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
liangy