zfire-newmall-admin/src/views/auxiliaryFittings/settleAccountManagement/settleAccountWeixinPay/index.vue

<template>
	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
		<template slot-scope="{activeKey, data}">
			<template-page ref="pageRef" v-if="tabIndexShow && activeKey == 'list'" :get-list="getList" :table-attributes="tableAttributes"
				:table-events="tableEvents" :operationColumnWidth="120" :options-evens-group="optionsEvensGroup"
				:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()"
				:exportList="tabIndex == 1 ? exportList1 : exportList2">
			  <div slot="moreSearch" style="margin-bottom: 10px;">
			  	<el-radio-group v-model="tabIndex" size="mini" @change="changeType">
			  		<el-radio-button label="1">汇总</el-radio-button>
			  		<el-radio-button label="2">明细</el-radio-button>
			  	</el-radio-group>
			  </div>
			  <div slot="moreSearch" v-if="tabIndex == 2">
			  	<el-radio-group v-model="status" size="mini" @change="changeType">
			  		<el-radio-button label="">全部</el-radio-button>
			  		<el-radio-button label="WAIT">待结算</el-radio-button>
			  		<el-radio-button label="WAIT_ING">可提现</el-radio-button>
			  		<el-radio-button label="ING">提现中</el-radio-button>
			  		<el-radio-button label="OVER">已提现</el-radio-button>
			  	</el-radio-group>
			  	<br><br>
			  </div>
			</template-page>
			<div v-if="~['detail'].indexOf(activeKey)">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>基础信息</span>
					</div>
					<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
						<tr>
							<td class="bold" align="center">所属商户</td>
							<td>{{ formData.companyWechatName }}</td>
							<td class="bold" align="center">关联工单号</td>
							<td>{{ formData.workerOrderId }}</td>
							<td class="bold" align="center">结算单号</td>
							<td>{{ formData.settlementOrderId }}</td>
							<td class="bold" align="center">工单品牌</td>
							<td>{{ formData.brand }}</td>
						</tr>
						<tr>
							<td class="bold" align="center">客户姓名</td>
							<td>{{ formData.userName }}</td>
							<td class="bold" align="center">客户电话</td>
							<td>{{ formData.userMobile }}</td>
							<td class="bold" align="center">师傅姓名</td>
							<td>{{ formData.workerName }}</td>
							<td class="bold" align="center">师傅身份证号</td>
							<td>{{ formData.identity }}</td>
						</tr>
						<tr>
							<td class="bold" align="center">师傅联系电话</td>
							<td>{{ formData.workerMobile }}</td>
							<td class="bold" align="center">订单金额</td>
							<td>{{ formData.totalAmount }}</td>
							<td class="bold" align="center">销售类型</td>
							<td>{{ formData.settlementType == 'OWN' ? '自由' : formData.settlementType == 'OUT' ? '外购' : '' }}</td>
							<td class="bold" align="center">创建人</td>
							<td>{{ formData.createBy }}</td>
						</tr>
						<tr>
							<td class="bold" align="center">创建时间</td>
							<td>{{ formData.createTime }}</td>
							<td class="bold" align="center">支付状态</td>
							<td>{{ formData.payStatus == 'CANCEL' ? '取消' : formData.payStatus == 'PAID' ? '已支付' : formData.payStatus ==
								'WAIT' ? '待支付' : '' }}</td>
							<td class="bold" align="center">支付订单号</td>
							<td>{{ formData.orderId }}</td>
							<td class="bold" align="center">支付时间</td>
							<td>{{ formData.payTime }}</td>
						</tr>
						<tr>
							<td class="bold" align="center">分账单号</td>
							<td>{{ formData.settlementOrderId }}</td>
							<td class="bold" align="center">分账状态</td>
							<td>{{ formData.status == 'WAIT' ? '待结算' : formData.status == 'WAIT_ING' ? '可提现' : formData.status ==
								'ING' ? '提现中' : formData.status == 'OVER' ? '已提现' : '' }}</td>
							<td class="bold" align="center">分账金额</td>
							<td>{{ formData.amount }}</td>
							<td class="bold" align="center">分账时间</td>
							<td>{{ formData.settlementTime }}</td>
						</tr>
						<tr>
							<td class="bold" align="center">师傅分账金额</td>
							<td>{{ formData.workerAmount }}</td>
							<td class="bold" align="center">师傅分账金额手续费</td>
							<td>{{ formData.workerProceAmount }}</td>
							<td class="bold" align="center">商户分账金额</td>
							<td>{{ formData.websitAmount }}</td>
							<td class="bold" align="center">商户分账金额手续费</td>
							<td>{{ formData.websitProceAmount }}</td>
						</tr>
						<tr>
							<td class="bold" align="center">操作人</td>
							<td>{{ formData.updateBy }}</td>
							<td class="bold" align="center">操作时间</td>
							<td>{{ formData.updateTime }}</td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</table>
				</el-card>
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>订单信息</span>
					</div>
					<table border="1" style="border-color: #fff;" width="100%" align="center" cellspacing="0" cellpadding="10">
						<thead>
							<tr>
								<th class="bold" align="center">名称</th>
								<th class="bold" align="center">收费类型</th>
								<th class="bold" align="center">数量</th>
								<th class="bold" align="center">单价</th>
								<th class="bold" align="center">订单金额</th>
								<th class="bold" align="center">销售类型</th>
								<th class="bold" align="center">手续费</th>
								<th class="bold" align="center">师傅分账金额</th>
								<th class="bold" align="center">商户分账金额</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in formData.settlementOrderItemList" :key="index">
								<td align="center">{{ item.goodsName }}</td>
								<td align="center">{{ item.chargeType == 'ACC' ? (item.goodsType ==
									'M' ? '辅材' : '配件') + '物料' : item.chargeType == 'SERV' ? '服务收费' : '' }}</td>
								<td align="center">{{ item.num }}</td>
								<td align="center">{{ item.goodsAmount }}</td>
								<td align="center">{{ item.totalAmount }}</td>
								<td align="center">{{ item.settlementType == 'OWN' ? '自有' : item.settlementType == 'OUT' ? '外购' : '' }}</td>
								<td align="center">{{ (item.websitProceAmount * 100 + item.workerProceAmount * 100) / 100 }}</td>
								<td align="center">{{ item.workerAmount }}</td>
								<td align="center">{{ item.websitAmount }}</td>
							</tr>
							<!-- <tr>
								<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
							</tr> -->
							<tr>
								<td align="center">总计</td>
								<td></td>
								<td></td>
								<td></td>
								<td align="center">{{ totalAmount }}</td>
								<td></td>
								<td align="center">{{ commissionAmount }}</td>
								<td align="center">{{ workerAmount }}</td>
								<td align="center">{{ websitAmount }}</td>
							</tr>
						</tbody>
					</table>
				</el-card>
				<div slot="footer" class="dialog-footer">
					<el-button size="mini" @click="formDialog = false; formData = {};data.removeTab()">取 消</el-button>
					<el-button size="mini" v-if="formData.status == 'WAIT'" type="primary"
						@click="settleAccounts(formData.settlementOrderId,data.removeTab,2)">确认结算
					</el-button>
					<el-button size="mini" v-if="formData.status == 'WAIT_ING'" type="primary" @click="withdraw(formData.settlementOrderId,data.removeTab,2)">
						确认提现
					</el-button>
				</div>
			</div>
		</template>
	</zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import ImageUpload from '@/components/file-upload'
import { downloadFiles } from '@/utils/util'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV1, listPageV2, pageExport1, pageExport2, getDetail, refund, settleAccounts, withdraw } from "@/api/auxiliaryFittings/settleAccountWeixinPay";
export default {
	components: { TemplatePage, ImageUpload },
	mixins: [import_mixin, operation_mixin],
	data() {
		return {
			// 表格属性
			tableAttributes: {
				// 启用勾选列
				selectColumn: true
			},
			// 表格事件
			tableEvents: {
				'selection-change': this.selectionChange
			},
			// 勾选选中行
			recordSelected: [],
			formDialogType: 0,
			formDialogTitles: ["新增", "编辑", "详情"],
			formDialog: false,
			formData: {},
			status: '',
			totalAmount: 0,
			workerAmount: 0,
			websitAmount: 0,
			commissionAmount: 0,
			tabIndex: 1,
			workerId: '',
			websitId: '',
			tabIndexShow: true,
			formType: 'add',
			formVisible: false,
		}
	},
	watch: {
		tabIndex() {
			this.tabIndexShow = false
			this.$nextTick(() => {
				if(this.tabIndex == 1){
					this.status = ''
				}
				this.tabIndexShow = true
			})
		}
	},
	computed: {
		// 事件组合
		optionsEvensGroup() {
			return [
				[
					[
						this.optionsEvensAuth("bulkSettlement", {
							isRole: this.tabIndex == 2,
							click: () => {
								this.batchSettleAccounts()
							}
						})
					],
				],
				[
					[
						this.optionsEvensAuth("bulkWithdrawal", {
							isRole: this.tabIndex == 2,
							click: () => {
								this.batchWithdraw()
							}
						})
					],
				]
			]
		},
		// 更多参数
		moreParameters() {
			return []
		}
	},
	methods: {
		// 切换状态
		changeType(val) {
			this.workerId = ''
			this.websitId = ''
			this.$refs.pageRef.refreshList()
		},
		// 列表请求函数
		getList(p) {
			try {
				var pam = JSON.parse(JSON.stringify(p))
				pam.params.push({ "param": "a.pay_type", "compare": "=", "value": 'WECHAT' })
				if (this.status && this.tabIndex == 2) {
					pam.params.push({ "param": "a.status", "compare": "=", "value": this.status })
				}
				if (this.workerId) {
					pam.params.push({ "param": "a.websit_id", "compare": "=", "value": this.websitId }, { "param": "a.worker_id", "compare": "=", "value": this.workerId })
				}
				return this.tabIndex == 1 ? listPageV1(pam) : listPageV2(pam)
			} catch (error) {
				console.log(error)
			}
		},
		// 列表导出函数
		exportList1: pageExport1,
		exportList2: pageExport2,
		// 表格列解析渲染数据更改
		columnParsing(item, defaultData) {
			return defaultData
		},
		// 监听勾选变化
		selectionChange(data) {
			this.recordSelected = data
		},
		openForm(type, id) {
			this.$refs.tabPage.addTab({
				// 对应显示的模块
				activeKey: type,
				// 唯一标识
				key: type,
				// 页签名称
				label: ({ detail: "详情" })[type],
				// 打开时事件
				triggerEvent: () => {
					this.formCancel()
					this.$nextTick(()=>{
						this.formType = type
						this.formVisible = true
						if (type == 'detail') {
							this.formDialogType = 1
							this.totalAmount = 0
							this.workerAmount = 0
							this.websitAmount = 0
							this.commissionAmount = 0
							getDetail({ id  }).then(res => {
								Object.assign(this.formData, res.data)
								res.data.settlementOrderItemList.forEach(item => {
									this.totalAmount += (item.totalAmount * 100 + this.totalAmount * 100) / 100
									this.workerAmount = (item.workerAmount * 100 + this.workerAmount * 100) / 100
									this.websitAmount += (item.websitAmount * 100 + this.websitAmount * 100) / 100
									this.commissionAmount += (item.websitProceAmount * 100 + item.workerProceAmount * 100 + this.commissionAmount * 100) / 100
								})
							})
						}
					})
				},
				// 关闭时事件
				closeEvent: () => {
				
				}
			})
		},
		formCancel() {
			this.formVisible = false
			this.$refs?.formRef?.resetFields()
			this.$data.formData = this.$options.data().formData
		},
		// 表格操作列
		operation() {
			return this.operationBtn({
				detail: {
					btnType: 'text',
					name: ({ row, index, column }) => {
						return this.tabIndex == 1 ? '查看明细' : '详情'
					},
					click: ({ row, index, column }) => {
						if (this.tabIndex == 1) {
							this.workerId = row.workerId
							this.websitId = row.websitId
							this.tabIndex = 2
							this.$refs.pageRef.refreshList()
						} else {
							this.openForm('detail',row.settlementOrderId)
						}
					}
				},
				refund: {
					btnType: 'text',
					prompt: '确认是否退款？',
					conditions: ({ row, index, column }) => {
						return row.totalAmount > 0 && row.refundStatus == 'NO' && this.tabIndex == 2
					},
					click: ({ row, index, column }) => {
						refund({ id: row.settlementOrderId }).then(res => {
							if (res.code == 200) {
								this.$message({ type: 'success', message: '退款成功!' })
								this.$refs.pageRef.refreshList()
							} else {
								this.$message.error(res.msg);
							}
						})
					}
				},
				settlement: {
					btnType: 'text',
					conditions: ({ row, index, column }) => {
						return row.status == 'WAIT' || this.tabIndex == 1
					},
					click: ({ row, index, column }) => {
						if (this.tabIndex == 1) {
							this.status = 'WAIT'
							this.workerId = row.workerId
							this.websitId = row.websitId
							this.tabIndex = 2
							this.$refs.pageRef.refreshList()
						} else {
							this.settleAccounts(row.settlementOrderId)
						}
					}
				},
				withdraw: {
					btnType: 'text',
					conditions: ({ row, index, column }) => {
						return row.status == 'WAIT_ING' && this.tabIndex == 2
					},
					click: ({ row, index, column }) => {
						this.withdraw(row.settlementOrderId)
					}
				},
			})
		},
		batchSettleAccounts() {
			if (this.recordSelected.length == 0) {
				return this.$message.warning('请至少勾选一条数据！');
			}
			this.settleAccounts(this.recordSelected.map(item => { return item.settlementOrderId }).join(','))
		},
		settleAccounts(id,cancel,type) {
			this.$confirm(`请确认是否结算选中数据, 是否继续?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				settleAccounts({
					id
				}).then(res => {
					if (res.code == 200) {
						this.$message({ type: 'success', message: `结算成功!` })
						if(type== 2){cancel('list')}
						this.$refs.pageRef.refreshList()
						this.formDialog = false
					} else {
						this.$message.error(res.msg);
					}
				})
			});
		},
		batchWithdraw() {
			if (this.recordSelected.length == 0) {
				return this.$message.warning('请至少勾选一条数据！');
			}
			this.withdraw(this.recordSelected.map(item => { return item.settlementOrderId }).join(','))
		},
		withdraw(id,cancel,type) {
			this.$confirm(`请确认是否提现选中数据, 是否继续?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				withdraw({
					id
				}).then(res => {
					if (res.code == 200) {
						this.$message({ type: 'success', message: `提现成功!` })
						if(type== 2){cancel('list')}
						this.$refs.pageRef.refreshList()
						this.formDialog = false
					} else {
						this.$message.error(res.msg);
					}
				})
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.tab {
	padding: 20px 20px 0 20px;
}

.bold {
	width: 160px;
	font-weight: bold;
	background-color: #f0f0f0;
}</style>