123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <template>
- <div class="page_warehousing">
- <div class="quarterBox">
- <p :class="Num == 1 ? 'active' : ''" @click="onClick(1)">近一月</p>
- <p :class="Num == 2 ? 'active' : ''" @click="onClick(2)">近三月</p>
- <p :class="Num == 3 ? 'active' : ''" @click="onClick(3)">近半年</p>
- <!-- <div class="toolBox"> -->
- <div class="toolOne" @click="startShow = true">
- <div style="display: flex;align-items: center;">
- {{ query.start_time }}
- <van-icon name="arrow-down"/>
- </div>
- </div>
- <div class="toolOne" @click="endShow = true">
- <div style="display: flex;align-items: center;">
- {{ query.end_time }}
- <van-icon name="arrow-down"/>
- </div>
- </div>
- <!-- </div> -->
- </div>
- <div>
- <el-table ref="tab" :data="tableData" style="width: 100%" :height="tableHeight" border :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
- <el-table-column label="商品类型" align="center">
- <template slot-scope="scope">
- <span v-if="scope.row.is_total == 1">{{ scope.row.type.type_name }}</span>
- <span v-if="scope.row.is_total == 2">合计</span>
-
- </template>
- </el-table-column>
- <el-table-column label="规格名称" align="center" width="80">
- <template slot-scope="scope">
- <span v-if="scope.row.is_total == 1">{{ scope.row.specification_name }}</span>
- <span v-if="scope.row.is_total == 2"></span>
-
- </template>
- </el-table-column>
- <el-table-column label="数量" align="center" width="80">
- <!--style="color: #579ef8"-->
-
- <template slot-scope="scope">
- <span v-if="scope.row.is_total == 1">{{calCount(scope.row) }}</span>
- <span v-if="scope.row.is_total == 2"></span>
-
- </template>
- </el-table-column>
- <el-table-column label="总价" align="center" width="80">
- <template slot-scope="scope">
- <span v-if="scope.row.is_total == 1">{{getTotal(scope.row)}}</span>
- <span v-if="scope.row.is_total == 2">{{scope.row.total}}</span>
-
- </template>
- </el-table-column>
- </el-table>
-
- </div>
- <div>
- <van-popup v-model="startShow" position="bottom" :style="{ height: '40%' }">
- <van-datetime-picker
- v-model="currentDate1"
- type="date"
- :min-date="minDate"
- :max-date="maxDate"
- @confirm="getstartTime"
- @cancel="startShow = false"
- />
- </van-popup>
- <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
- <van-datetime-picker
- v-model="currentDate2"
- type="date"
- :min-date="minDate"
- :max-date="maxDate"
- @confirm="getstartTime2"
- @cancel="endShow = false"
- />
- </van-popup>
- </div>
- </div>
- </template>
-
-
- <script>
- const moment = require('moment')
- import {GetStockInfo} from "@/api/statistics";
-
-
- export default {
- data() {
- return {
- tableHeight:'',
- currentDate1: new Date(new Date().setDate(new Date().getDate() - 7)),
- currentDate2: new Date(),
- minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
- maxDate: new Date(),
- query: {
- start_time: "",
- end_time: "",
- type: 1,
- },
- Num: 1,
- startShow: false,
- endShow: false,
- currentDate: new Date(),
- startTime: "请选择",
- endTime: "请选择",
- tableData: []
- }
- },
- methods: {
- getTotal(stock) {
- let total = 0
- var array = []
- array = stock.query_warehousing_info
- for (let i = 0; i < array.length; i++) {
- total = total + (array[i].warehousing_count * array[i].price)
-
- }
- return total
-
- },
- calCount(stock) {
- let total = 0
- var array = []
- array = stock.query_warehousing_info
- for (let i = 0; i < array.length; i++) {
- total = total + array[i].warehousing_count
- }
- return total
-
- },
- GetStockInfo() {
-
-
- },
- stockInCount: function (row) {
- let total = 0;
- for (let i = 0; i < row.query_warehousing_info.length; i++) {
- total = total + row.query_warehousing_info[i].warehousing_count;
- }
- return total;
- },
- onClick(id) {
- if (id == 1) {
- this.Num = 1;
- } else if (id == 2) {
- this.Num = 2;
- } else if (id == 3) {
- this.Num = 3;
- }
- switch (this.Num) {
- case 1: //近1个月
- this.currentDate1 = new Date(new Date().setMonth(new Date().getMonth() + 1)),
- this.currentDate2 = new Date()
- this.isStop = false
- const startDate = moment().subtract('month', 1).format('YYYY-MM-DD')
- this.query.start_time = startDate
- const endDate = moment(new Date()).format('YYYY-MM-DD')
- this.query.end_time = endDate
- this.GetStockInfo(this.query)
- break
- case 2: //近三月
- this.currentDate1 = new Date(new Date().setMonth(new Date().getMonth() - 3)),
- this.currentDate2 = new Date()
- this.isStop = false
- this.query.page = 1
- this.query.start_time = moment().subtract('month', 3).format('YYYY-MM-DD')
- this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
- this.GetStockInfo(this.query)
- break
- case 3: //近6月
- this.isStop = false
- this.query.page = 1
- this.query.start_time = moment().subtract('month', 6).format('YYYY-MM-DD')
- this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
- this.GetStockInfo(this.query)
- break
- }
-
- },
- getstartTime(value) {
- this.Num = 0
- let year = value.getFullYear();
- let month = value.getMonth() + 1;
- let day = value.getDate();
- if (month >= 1 && month <= 9) {
- month = `0${month}`;
- }
- if (day >= 1 && day <= 9) {
- day = `0${day}`;
- }
-
- this.query.start_time = `${year}-${month}-${day}`;
-
- this.GetStockInfo(this.query)
- this.startShow = false;
- },
- getstartTime2(value) {
- this.Num = 0
- let year = value.getFullYear();
- let month = value.getMonth() + 1;
- let day = value.getDate();
- if (month >= 1 && month <= 9) {
- month = `0${month}`;
- }
- if (day >= 1 && day <= 9) {
- day = `0${day}`;
- }
-
- this.query.end_time = `${year}-${month}-${day}`;
- this.GetStockInfo(this.query)
-
- this.endShow = false;
- },
- GetStockInfo(params) {
- this.tableData = []
- GetStockInfo(params)
- .then(rs => {
- var resp = rs.data
- if (resp.state == 1) {
- let all_total = 0
- for (let i = 0; i < resp.data.list.length; i++) {
- if (resp.data.list[i].query_warehousing_info.length > 0) {
- resp.data.list[i]['is_total'] = 1
- this.tableData.push(resp.data.list[i])
- for (let b = 0; b < resp.data.list[i].query_warehousing_info.length; b++) {
- all_total = all_total + (resp.data.list[i].query_warehousing_info[b].warehousing_count * resp.data.list[i].query_warehousing_info[b].price)
- }
- }
- }
-
- let obj = {
- is_total:2,
- total:all_total,
- }
- this.tableData.push(obj)
- } else {
- this.$toast({
- message: resp.msg
- })
- }
- })
- .catch(error => {
-
- })
-
-
- },
-
- }, created() {
- this.tableHeight = (document.documentElement.clientHeight - (Number(document.documentElement.style.fontSize.slice(0, -2)) * 2.75)) + 'px'
- // this.query.start_time = moment().subtract('day', 7).format('YYYY-MM-DD')
- this.query.start_time = moment().subtract('month', 1).format('YYYY-MM-DD')
-
- // 本月的结束时间
- this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
- this.GetStockInfo(this.query)
- }
-
- }
- </script>
-
-
- <style lang="scss" scoped>
- .page_warehousing {
-
- .quarterBox {
- display: flex;
- height: 2.5rem;
- align-items: center;
- justify-content: space-around;
-
- p {
- width: 3rem;
- height: 1.875rem;
- line-height: 1.875rem;
- background: rgba(246, 246, 246, 1);
- opacity: 0.8;
- border-radius: 0.3125rem;
- color: #8d8d8d;
- cursor: pointer;
- text-align: center;
- font-size: 0.8125rem;
- }
-
- .active {
- background: rgba(51, 138, 251, 1);
- color: #fff;
- border: 1px solid #338afb;
- }
-
- }
-
- .toolOne {
- width: 6.25rem;
- height: 1.875rem;
- background: rgba(246, 246, 246, 1);
- border-radius: 5px;
- text-align: center;
- font-size: 0.8125rem;
- color: #8d8d8d;
- display: flex;
- align-items: center;
- justify-content: space-around;
- }
-
- }
-
-
- </style>
- <style lang="scss">
- ::-webkit-scrollbar {
- height: 0;
- width: 0;
- }
- </style>
|