zfire-newmall-admin/src/views/auxiliaryFittings/settleAccountManagement/settleAccountOfflinePay/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="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.updateBy}}</td>
							<td class="bold" align="center">操作时间</td>
							<td>{{formData.updateTime}}</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>
							</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.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.workerAmount}}</td>
								<td align="center">{{item.websitAmount}}</td>
							</tr>
							<tr>
								<td align="center">总计</td><td></td><td></td><td></td>
								<td align="center">{{totalAmount}}</td><td></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)">
						确认提现
					</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 } from "@/api/auxiliaryFittings/settleAccountOfflinePay";
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,
		tabIndex: 1,
		workerId: '',
		websitId: '',
		tabIndexShow: true,
		formType: 'add',
		formVisible: false,
    }
  },
  watch: {
  	tabIndex() {
  		this.tabIndexShow = false
  		this.$nextTick(() => {
			if(this.tabIndex == 1){
				this.status = ''
				this.workerId = ''
				this.websitId = ''
			}
  			this.tabIndexShow = true
  		})
  	}
  },
  computed: {
	  // 事件组合
	  optionsEvensGroup() {
	  	return [
	  		[
	  			[
	  				this.optionsEvensAuth("bulkSettlement", {
						isRole: this.tabIndex== 2,
	  					click: () => {
	  						this.batchSettleAccounts()
	  					}
	  				})
	  			],
	  		]
	  	]
	  },
    // 更多参数
    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": 'LINE' })
	    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
						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
						  })
						})
					}
				})
			},
			// 关闭时事件
			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)
					}
				}
			}
		})
	},
	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);
				}
			})
		});
	}
  }
}
</script>

<style lang="scss" scoped>
	.tab{
		padding: 20px 20px 0 20px;
	}
	.bold{
		width: 160px;
		font-weight: bold;
		background-color: #f0f0f0;
	}
</style>