|
@@ -1,292 +1,232 @@
|
|
<template>
|
|
<template>
|
|
- <div v-loading="listLoading" class="dashboard-editor-container">
|
|
|
|
- <el-row :gutter="22" style="min-height: calc(100vh - 84px);">
|
|
|
|
- <el-col :xs="24" :sm="24" :lg="12">
|
|
|
|
- <div class="chart-wrapper">
|
|
|
|
- <div class="chart-title">
|
|
|
|
- <span>收款金额(元)</span>
|
|
|
|
- <div style="float: right;">
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="Receivable.startTime"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择日期"
|
|
|
|
- style="width: 150px;"
|
|
|
|
- />
|
|
|
|
- 至
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="Receivable.endTime"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择日期"
|
|
|
|
- style="width: 150px;"
|
|
|
|
- @blur="handleGetReceivable"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="chartText">
|
|
|
|
- <p>应收金额</p>
|
|
|
|
- <p class="money">¥{{ payTotalFee | toThousandFloatFilter }}</p>
|
|
|
|
- </div>
|
|
|
|
- <raddar-chart v-if="isRequest" :receivab="ReceivableData" />
|
|
|
|
- </div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :xs="24" :sm="24" :lg="12">
|
|
|
|
- <div class="chart-wrapper">
|
|
|
|
- <div class="chart-title">
|
|
|
|
- <span>订单数量(个)</span>
|
|
|
|
- <div style="float: right;">
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="Order.startTime"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择日期"
|
|
|
|
- style="width: 150px;"
|
|
|
|
- />
|
|
|
|
- 至
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="Order.endTime"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择日期"
|
|
|
|
- style="width: 150px;"
|
|
|
|
- @blur="handleGetHomepageOrder"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="chartText">
|
|
|
|
- <p>全部订单</p>
|
|
|
|
- <p class="money">{{ count }}个</p>
|
|
|
|
- </div>
|
|
|
|
- <pie-chart v-if="isOrderRequest" :order-data="OrderData" />
|
|
|
|
- </div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :xs="24" :sm="24" :lg="12">
|
|
|
|
- <div class="chart-wrapper">
|
|
|
|
- <div class="chart-title">
|
|
|
|
- <span>销售额趋势</span>
|
|
|
|
- </div>
|
|
|
|
- <bar-chart v-if="isSaleRequest" :paytotalfee-data="payTotalFeeData" :month-data="monthData" />
|
|
|
|
- </div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :xs="24" :sm="24" :lg="12">
|
|
|
|
- <div class="chart-wrapper">
|
|
|
|
- <div class="chart-title">
|
|
|
|
- <span>热销商品</span>
|
|
|
|
- <div style="float: right;">
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="Commodity.startTime"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择日期"
|
|
|
|
- style="width: 150px;"
|
|
|
|
- />
|
|
|
|
- 至
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="Commodity.endTime"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择日期"
|
|
|
|
- style="width: 150px;"
|
|
|
|
- @blur="handleGetHomepageCommodity"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <hot-goods v-if="isGoodRequest" :goodslist-data="goodsList" />
|
|
|
|
- </div>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
|
|
+ <div class="app-container">
|
|
|
|
+ <el-card ref="print" class="box-card" style="margin: 0 auto;">
|
|
|
|
+ <h1 class="home-title" style="text-align: center;">欢迎访问丽格集采联盟后台系统</h1>
|
|
|
|
+ </el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import RaddarChart from './components/RaddarChart'
|
|
|
|
-import PieChart from './components/PieChart'
|
|
|
|
-import BarChart from './components/BarChart'
|
|
|
|
-import HotGoods from './components/HotGoods'
|
|
|
|
-import { getReceivable, getHomepageOrder, getHomepageSale, getHomepageCommodity } from '@/api/home'
|
|
|
|
|
|
+import { getPayDetails, getReceiptTypeList, subPayApply, subPayCheck } from '@/api/finance'
|
|
export default {
|
|
export default {
|
|
- name: 'Admin',
|
|
|
|
- components: {
|
|
|
|
- RaddarChart,
|
|
|
|
- PieChart,
|
|
|
|
- BarChart,
|
|
|
|
- HotGoods
|
|
|
|
|
|
+ name: 'PaymentDetails',
|
|
|
|
+ filters: {
|
|
|
|
+ statusFilter(status) {
|
|
|
|
+ const map = {
|
|
|
|
+ 0: '待审核',
|
|
|
|
+ 1: '审核通过',
|
|
|
|
+ 2: '审核不通过'
|
|
|
|
+ }
|
|
|
|
+ return map[status]
|
|
|
|
+ },
|
|
|
|
+ receiptStatusFilter(status) {
|
|
|
|
+ const map = {
|
|
|
|
+ 1: '待收款',
|
|
|
|
+ 2: '部分收款',
|
|
|
|
+ 3: '已收款'
|
|
|
|
+ }
|
|
|
|
+ return map[status]
|
|
|
|
+ },
|
|
|
|
+ payStatusFilter(status) {
|
|
|
|
+ const map = {
|
|
|
|
+ 1: '待付款',
|
|
|
|
+ 2: '部分付款',
|
|
|
|
+ 3: '已付款'
|
|
|
|
+ }
|
|
|
|
+ return map[status]
|
|
|
|
+ }
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- listLoading: true,
|
|
|
|
- isRequest: false,
|
|
|
|
- isOrderRequest: false,
|
|
|
|
- isSaleRequest: false,
|
|
|
|
- isGoodRequest: false,
|
|
|
|
- ReceivableData: [],
|
|
|
|
- OrderData: [],
|
|
|
|
- payTotalFeeData: [],
|
|
|
|
- monthData: [],
|
|
|
|
- goodsList: [],
|
|
|
|
- Receivable: {
|
|
|
|
- startTime: this.getCurrentMonthFirst(),
|
|
|
|
- endTime: this.getCurrentMonthLast(),
|
|
|
|
- organizeId: this.$store.getters.organizeId
|
|
|
|
- },
|
|
|
|
- Order: {
|
|
|
|
- startTime: this.getCurrentMonthFirst(),
|
|
|
|
- endTime: this.getCurrentMonthLast(),
|
|
|
|
- organizeId: this.$store.getters.organizeId
|
|
|
|
|
|
+ printObj: {
|
|
|
|
+ id: 'printBox', // 局部打印的<div> Id
|
|
|
|
+ popTitle: '', // 打印配置页上方标题
|
|
|
|
+ extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
|
|
|
|
+ preview: '', // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)
|
|
|
|
+ previewTitle: '', // 打印预览的标题(开启预览模式后出现),
|
|
|
|
+ previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)
|
|
|
|
+ zIndex: '', // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)
|
|
|
|
+ previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback(开启预览模式调用)
|
|
|
|
+ previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)
|
|
|
|
+ beforeEntryIframe() {
|
|
|
|
+ const cells = document.querySelectorAll('.cell')
|
|
|
|
+ const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
|
|
|
|
+ // el-table 打印不全的问题
|
|
|
|
+ for (let j = 0; j < tableNode.length; j++) {
|
|
|
|
+ const tableItem = tableNode[j]
|
|
|
|
+ tableItem.style.width = '100%'
|
|
|
|
+ const child = tableItem.childNodes
|
|
|
|
+ for (let i = 0; i < child.length; i++) {
|
|
|
|
+ const element = child[i]
|
|
|
|
+ if (element.localName === 'colgroup') {
|
|
|
|
+ element.innerHTML = ''
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // el-table 格子里面打印超过格子的问题
|
|
|
|
+ for (let i = 0; i < cells.length; i++) {
|
|
|
|
+ const cell = cells[i]
|
|
|
|
+ cell.style.width = '100%'
|
|
|
|
+ cell.removeAttribute('style')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ openCallback() {
|
|
|
|
+
|
|
|
|
+ }, // 调用打印之后的回调事件
|
|
|
|
+ closeCallback() {}, // 关闭打印的回调事件(无法确定点击的是确认还是取消)
|
|
|
|
+ url: '',
|
|
|
|
+ standard: '',
|
|
|
|
+ extraCss: '',
|
|
|
|
+ loading: false
|
|
},
|
|
},
|
|
- Commodity: {
|
|
|
|
- startTime: this.getCurrentMonthFirst(),
|
|
|
|
- endTime: this.getCurrentMonthLast(),
|
|
|
|
- organizeId: this.$store.getters.organizeId
|
|
|
|
|
|
+ payRepacts: {},
|
|
|
|
+ receiptTypeList: [],
|
|
|
|
+ detailsType: '',
|
|
|
|
+ dialogVisible: false,
|
|
|
|
+ checkParams: {
|
|
|
|
+ id: 0,
|
|
|
|
+ passCode: 1,
|
|
|
|
+ payType: ''
|
|
|
|
+
|
|
},
|
|
},
|
|
- count: 0,
|
|
|
|
- payTotalFee: ''
|
|
|
|
|
|
+ rules: {
|
|
|
|
+ reason: [{ required: true, message: '请填写不通过原因', trigger: 'blur' }]
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- organizeId() {
|
|
|
|
- return this.$store.getters.organizeId
|
|
|
|
|
|
+ payShopId: function() {
|
|
|
|
+ return this.$route.query.payShopId * 1
|
|
|
|
+ },
|
|
|
|
+ disabled() {
|
|
|
|
+ return !this.checkParams.reason
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- this.fetchData()
|
|
|
|
|
|
+ if (this.$route.query.type) {
|
|
|
|
+ this.detailsType = this.$route.query.type
|
|
|
|
+ }
|
|
|
|
+ this.getPayDetails()
|
|
|
|
+ this.getReceiptTypeList()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- fetchData() {
|
|
|
|
- this.listLoading = true
|
|
|
|
- this.handleGetReceivable()
|
|
|
|
- this.handleGetHomepageOrder()
|
|
|
|
- this.handleGetHomepageSale()
|
|
|
|
- this.handleGetHomepageCommodity()
|
|
|
|
- setTimeout(function() {
|
|
|
|
- this.listLoading = false
|
|
|
|
- }, 5000)
|
|
|
|
- },
|
|
|
|
- handleGetReceivable() {
|
|
|
|
- getReceivable(this.Receivable).then(response => {
|
|
|
|
- this.isRequest = true
|
|
|
|
- this.payTotalFee = response.data.payTotalFee
|
|
|
|
- const receob = { name: '已收金额', value: response.data.amountReceived }
|
|
|
|
- const receob1 = { name: '未收金额', value: response.data.uncollected }
|
|
|
|
- this.ReceivableData = [receob, receob1]
|
|
|
|
- this.listLoading = false
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- handleGetHomepageOrder() {
|
|
|
|
- getHomepageOrder(this.Order).then(response => {
|
|
|
|
- this.isOrderRequest = true
|
|
|
|
- this.count = response.data.count
|
|
|
|
- const order = { name: '已收款订单', value: response.data.received }
|
|
|
|
- const order1 = { name: '未收款订单', value: response.data.uncollected }
|
|
|
|
- const order2 = { name: '部分收款订单', value: response.data.portion }
|
|
|
|
- this.OrderData = [order, order1, order2]
|
|
|
|
- this.listLoading = false
|
|
|
|
- })
|
|
|
|
|
|
+ // 付款单详情
|
|
|
|
+ async getPayDetails() {
|
|
|
|
+ try {
|
|
|
|
+ const res = await getPayDetails(this.payShopId)
|
|
|
|
+ console.log('res', res)
|
|
|
|
+ this.payRepacts = res.data
|
|
|
|
+ } catch (error) {
|
|
|
|
+ console.log('error', error)
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- handleGetHomepageSale() {
|
|
|
|
- getHomepageSale({ organizeId: this.$store.getters.organizeId }).then(response => {
|
|
|
|
- this.isSaleRequest = true
|
|
|
|
- this.monthData = response.data.month
|
|
|
|
- this.payTotalFeeData = response.data.payTotalFee
|
|
|
|
- this.listLoading = false
|
|
|
|
- })
|
|
|
|
|
|
+ // 获取收款账号列表
|
|
|
|
+ async getReceiptTypeList() {
|
|
|
|
+ const res = await getReceiptTypeList()
|
|
|
|
+ this.receiptTypeList = res.data
|
|
|
|
+ this.checkParams.payType = res.data[0].id
|
|
},
|
|
},
|
|
- handleGetHomepageCommodity() {
|
|
|
|
- getHomepageCommodity(this.Commodity).then(response => {
|
|
|
|
- this.isGoodRequest = true
|
|
|
|
- this.goodsList = response.data
|
|
|
|
- this.listLoading = false
|
|
|
|
|
|
+ payTypeFilters(value) {
|
|
|
|
+ // 收款账号
|
|
|
|
+ let valueText = ''
|
|
|
|
+ this.receiptTypeList.forEach(type => {
|
|
|
|
+ if (value === type.id) { valueText = type.name } else { valueText = '---' }
|
|
})
|
|
})
|
|
|
|
+ console.log('valueText', valueText)
|
|
|
|
+ return valueText
|
|
},
|
|
},
|
|
- numFormat(num) {
|
|
|
|
- var c = (num.toString().indexOf('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
|
|
|
|
- return c
|
|
|
|
|
|
+ hanldeConfirm() {
|
|
|
|
+ // 保存编辑
|
|
|
|
+ this.payRepacts.operateMode = 1
|
|
|
|
+ this.subPayApply(this.payRepacts)
|
|
},
|
|
},
|
|
- getCurrentMonthFirst() {
|
|
|
|
- var date = new Date()
|
|
|
|
- date.setDate(1)
|
|
|
|
- var month = parseInt(date.getMonth() + 1)
|
|
|
|
- var day = date.getDate()
|
|
|
|
- if (month < 10) {
|
|
|
|
- month = '0' + month
|
|
|
|
|
|
+ async subPayApply(params) {
|
|
|
|
+ // 执行保存
|
|
|
|
+ try {
|
|
|
|
+ await subPayApply(params)
|
|
|
|
+ this.$message.success('提交成功')
|
|
|
|
+ this.backToList()
|
|
|
|
+ } catch (error) {
|
|
|
|
+ console.log('error', error)
|
|
}
|
|
}
|
|
- if (day < 10) {
|
|
|
|
- day = '0' + day
|
|
|
|
- }
|
|
|
|
- const startTime = date.getFullYear() + '-' + month + '-' + day
|
|
|
|
- return startTime
|
|
|
|
},
|
|
},
|
|
- getCurrentMonthLast() {
|
|
|
|
- var date = new Date()
|
|
|
|
- var currentMonth = date.getMonth()
|
|
|
|
- var nextMonth = ++currentMonth
|
|
|
|
- var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
|
|
|
|
- var oneDay = 1000 * 60 * 60 * 24
|
|
|
|
- var lastTime = new Date(nextMonthFirstDay - oneDay)
|
|
|
|
- var month = parseInt(lastTime.getMonth() + 1)
|
|
|
|
- var day = lastTime.getDate()
|
|
|
|
- if (month < 10) {
|
|
|
|
- month = '0' + month
|
|
|
|
|
|
+ handlePayCheck(type) {
|
|
|
|
+ // 审核
|
|
|
|
+ if (type === 1) {
|
|
|
|
+ this.checkParams.reason = ''
|
|
}
|
|
}
|
|
- if (day < 10) {
|
|
|
|
- day = '0' + day
|
|
|
|
|
|
+ this.checkParams.id = this.payRepacts.payShopId
|
|
|
|
+ this.checkParams.passCode = type
|
|
|
|
+ this.subPayCheck(this.checkParams)
|
|
|
|
+ },
|
|
|
|
+ async subPayCheck(params) {
|
|
|
|
+ // 执行审核
|
|
|
|
+ try {
|
|
|
|
+ await subPayCheck(params)
|
|
|
|
+ this.$message.success('审核成功')
|
|
|
|
+ this.checkParams.reason = ''
|
|
|
|
+ this.backToList()
|
|
|
|
+ } catch (error) {
|
|
|
|
+ console.log('error', error)
|
|
}
|
|
}
|
|
- return date.getFullYear() + '-' + month + '-' + day
|
|
|
|
|
|
+ },
|
|
|
|
+ backToList() {
|
|
|
|
+ this.$store.dispatch('tagsView/delView', this.$route).then(() => {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$router.replace({
|
|
|
|
+ path: '/finance/payment-list'
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped >
|
|
|
|
-.dashboard-editor-container {
|
|
|
|
- padding: 22px;
|
|
|
|
- min-height: calc(100vh - 84px);
|
|
|
|
- position: relative;
|
|
|
|
- .chart-wrapper {
|
|
|
|
- background: #fff;
|
|
|
|
- padding: 3px 16px 0;
|
|
|
|
- margin-bottom: 22px;
|
|
|
|
- height: 475px;
|
|
|
|
- border-radius: 10px;
|
|
|
|
- position: relative;
|
|
|
|
- -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 0 3px 0 rgba(0,0,0,0.04);
|
|
|
|
- box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 0 3px 0 rgba(0,0,0,0.04);
|
|
|
|
- .chartText{
|
|
|
|
- width: 130px;
|
|
|
|
- height: 140px;
|
|
|
|
- padding-top:30px;
|
|
|
|
- font-weight: bold;
|
|
|
|
- font-size: 18px;
|
|
|
|
- color:#98A0A7;
|
|
|
|
- text-align: center;
|
|
|
|
- position: absolute;
|
|
|
|
- top:0;
|
|
|
|
- left:0;
|
|
|
|
- right:0;
|
|
|
|
- bottom:0;
|
|
|
|
- margin:auto;
|
|
|
|
- .money{
|
|
|
|
- color:#000000;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .chart-title{
|
|
|
|
- height: 48px;
|
|
|
|
- line-height: 48px;
|
|
|
|
- border-bottom: 1px solid #dfe6ec;
|
|
|
|
- span{
|
|
|
|
- text-align: left;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-weight: bold;
|
|
|
|
- color: #000000;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+<style scoped>
|
|
|
|
+ .app-title{
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ font-size: 26px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #409EFF;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin: 0;
|
|
}
|
|
}
|
|
-}
|
|
|
|
-
|
|
|
|
-@media (max-width:1024px) {
|
|
|
|
- .chart-wrapper {
|
|
|
|
- padding: 8px;
|
|
|
|
|
|
+ .box-card{
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ .box-row{
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ }
|
|
|
|
+ .box-row .dropdown{
|
|
|
|
+ margin-top: -10px;
|
|
|
|
+ }
|
|
|
|
+ .refund-item{
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ }
|
|
|
|
+ .order-item{
|
|
|
|
+ background:#f7f7f7;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ }
|
|
|
|
+ .product-row{
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ background: #EBEEF5;
|
|
|
|
+ border-top: 1px dashed #DCDFE6;
|
|
|
|
+ }
|
|
|
|
+ .op-item{
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ }
|
|
|
|
+ .el-span-warning{
|
|
|
|
+ color: #E6A23C;
|
|
|
|
+ }
|
|
|
|
+ .el-span-success{
|
|
|
|
+ color: #67C23A;
|
|
|
|
+ }
|
|
|
|
+ .el-span-danger{
|
|
|
|
+ color: #F56C6C;
|
|
}
|
|
}
|
|
-}
|
|
|
|
</style>
|
|
</style>
|
|
|
|
+
|