jsm-mall-front/src/views/auxiliaryFittings/settleAccountManagement/salesWithdraw/index.vue

<template>
	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
		<template slot-scope="{activeKey, data}">
			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
			  :operation="operation()" :exportList="exportList" :operationColumnWidth="110">
			  <div slot="moreSearch">
			  	<el-radio-group v-model="status" size="mini" @change="changeType">
			  		<el-radio-button label="">全部</el-radio-button>
			  		<el-radio-button label="0">待发放</el-radio-button>
			  		<el-radio-button label="1">已发放</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.type == 1 ? '销售提现' : '服务提现' }}</td>
							<td class="bold" align="center">单据编号</td>
							<td>{{ formData.id }}</td>
							<td class="bold" align="center">发放状态</td>
							<td>{{ formData.status == 0 ? '待发放' : formData.status == 1 ? '已发放' : '' }}</td>
							<td class="bold" align="center"></td>
							<td></td>
						</tr>
						<tr>
							<td class="bold" align="center">师傅姓名</td>
							<td>{{ formData.workerName }}</td>
							<td class="bold" align="center">师傅编号</td>
							<td>{{ formData.workerId }}</td>
							<td class="bold" align="center">师傅身份证号</td>
							<td>{{ formData.idcard }}</td>
							<td class="bold" align="center">师傅联系电话</td>
							<td>{{ formData.workerMobile }}</td>
						</tr>
						<tr>
							<td class="bold" align="center">申请时间</td>
							<td>{{ formData.createTime }}</td>
							<td class="bold" align="center">账户类型</td>
							<td>{{ formData.accountType }}</td>
							<td class="bold" align="center">开户银行</td>
							<td>{{ formData.bank }}</td>
							<td class="bold" align="center">开户支行</td>
							<td>{{ formData.subBank }}</td>
						</tr>
						<tr>
							<td class="bold" align="center">持卡人</td>
							<td>{{ formData.bankUserName }}</td>
							<td class="bold" align="center">银行卡号</td>
							<td>{{ formData.bankNo }}</td>
							<td class="bold" align="center">提现金额</td>
							<td>￥{{ formData.amount }}</td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="bold" align="center">备注</td>
							<td colspan="7">{{ formData.remark }}</td>
						</tr>
						<tr>
							<td class="bold" align="center"><span style="color: red;">*</span>转账凭证</td>
							<td colspan="7" style="width: 80px;height: 80px">
								<ImageUpload :fileList="formData.certImg" :limit="1" :isEdit="formData.status == 0" />
							</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.withdrawalOrderItems" :key="index">
								<td align="center">{{ item.id }}</td>
								<td align="center">{{ item.goodsType == 'M' ? '辅材' : '配件' }}</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.totalPrice }}</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 style="color: #ffffff;">隐身</td><td></td><td></td><td></td><td></td><td></td><td></td>
							</tr> -->
							<tr>
								<td align="center">总计</td>
								<td></td>
								</td>
								<td>
								<td align="center">{{ totalAmount || 0 }}</td>
								<td></td>
								<td align="center">{{ workerAmount || 0 }}</td>
								<td align="center">{{ websitAmount || 0 }}</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 == 0" type="primary" @click="update(formData.id,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 ImageUpload from '@/components/file-upload'
import { downloadFiles } from '@/utils/util'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2, pageExport, getDetail, update } from "@/api/auxiliaryFittings/salesWithdraw";
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
	components: { TemplatePage, ImageUpload },
	mixins: [import_mixin, operation_mixin],
	data() {
		return {
			// 事件组合
			optionsEvensGroup: [],
			// 表格属性
			tableAttributes: {
				// 启用勾选列
				selectColumn: true
			},
			// 表格事件
			tableEvents: {
				'selection-change': this.selectionChange
			},
			// 勾选选中行
			recordSelected: [],
			formDialogType: 0,
			formDialogTitles: ["新增", "编辑", "详情"],
			formDialog: false,
			formData: {},
			status: '',
			totalAmount: 0,
			workerAmount: 0,
			websitAmount: 0,
			formType: 'add',
			formVisible: false,
		}
	},
	computed: {
		// 更多参数
		moreParameters() {
			return []
		}
	},
	methods: {
		// 切换状态
		changeType(val) {
			this.$refs.pageRef.refreshList()
		},
		// 列表请求函数
		getList(p, cb) {
			try {
				var pam = JSON.parse(JSON.stringify(p))
				if (this.status || this.status >= 0) {
					pam.params.push({ "param": "a.status", "compare": "=", "value": this.status })
				}
				cb && cb(pam)
				return listPageV2(pam)
			} catch (error) {
				console.log(error)
			}
		},
		// 列表导出函数
		exportList: pageExport,
		// 表格列解析渲染数据更改
		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, {
									certImg: res.data?.certImg ? res.data?.certImg?.split(",").map(item => ({ url: item })) : []
								})
								res.data.withdrawalOrderItems.forEach(item => {
									this.totalAmount += (item.totalPrice * 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: {
					click: ({ row, index, column }) => {
						this.openForm('detail',row.id)
					}
				},
				setSent: {
					conditions: ({ row, index, column }) => {
						return row.status == 0
					},
					click: ({ row, index, column }) => {
						this.openForm('detail',row.id)
					}
				}
			})
		},

		update(id) {
			if (this.formData.certImg.length == 0) {
				return this.$message.warning('请先上传转账凭证！');
			}
			this.$confirm('请确认是否设为已发放, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				update({ id, certImg: this.formData.certImg.map(item => item.url).join(",") }).then(res => {
					if (res.code == 200) {
						this.$message({ type: 'success', message: '设为已发放成功!' })
						this.formDialog = false
						this.$refs.pageRef.refreshList()
					} 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>