<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="代理商名称" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入代理商名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="运营区名称" prop="areaName">
<el-input
v-model="queryParams.areaName"
placeholder="请输入运营区名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="微信" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入微信"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="代理商状态" clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:dept:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="deptList"
row-key="deptId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
:default-sort="defaultSort" @sort-change="handleSortChange">
<el-table-column prop="deptName" label="代理商名称" width="180" sortable="custom" :sort-orders="['descending', 'ascending']"></el-table-column>
<el-table-column prop="areaName" label="名下运营区" align="center" ></el-table-column>
<el-table-column prop="phone" label="联系电话" align="center" ></el-table-column>
<el-table-column prop="appName" label="小程序" align="center" ></el-table-column>
<!-- <el-table-column prop="userName" label="绑定提现账户" align="center" ></el-table-column>-->
<el-table-column prop="separateAccount" label="独立支付" align="center" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.separateAccount"/>
</template>
</el-table-column>
<el-table-column prop="platformServiceFee" label="服务费(%)" align="center" >
<template slot-scope="scope">
<span>{{ scope.row.platformServiceFee && scope.row.platformServiceFee != '0'?scope.row.platformServiceFee+'%':'' }}</span>
</template>
</el-table-column>
<el-table-column prop="handlingCharge" label="充值手续费" align="center" >
<template slot-scope="scope">
<span>{{ scope.row.handlingCharge && scope.row.handlingCharge != '0'?scope.row.handlingCharge+'‰':'' }}</span>
</template>
</el-table-column>
<el-table-column prop="withdrawHandlingCharge" label="提现手续费" align="center" >
<template slot-scope="scope">
<span>{{ formatWithdrawHandlingCharge(scope.row.withdrawHandlingCharge,scope.row.handlingChargeType) }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="余额" align="center" prop="balance" sortable="custom" :sort-orders="['descending', 'ascending']">
<template slot-scope="scope">
<span class="balance-cell">{{ scope.row.balance }}元</span>
</template>
</el-table-column>
<el-table-column label="收款码" align="center" prop="collectionCode" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.collectionCode" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="200" sortable="custom" :sort-orders="['descending', 'ascending']">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:dept:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="withdraw(scope.row)"
v-hasPermi="['system:dept:edit']"
>提现</el-button>
<el-button
v-if="scope.row.parentId != 0"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:dept:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改代理商对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="代理商名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入代理商名称" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="绑定提现账户" prop="phonenumber" label-width="120">-->
<!-- <el-select-->
<!-- style="width: 80%"-->
<!-- ref="headerSearchSelect"-->
<!-- v-model="form.appUserId"-->
<!-- :remote-method="queryPhonenumber"-->
<!-- filterable-->
<!-- default-first-option-->
<!-- remote-->
<!-- :loading="loading2"-->
<!-- placeholder="输入手机号搜索"-->
<!-- class="header-search-select" >-->
<!-- <el-option-->
<!-- v-for="item in options"-->
<!-- :key="item.value"-->
<!-- :label="item.label+'---'+item.appName"-->
<!-- :value="item.value">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="绑定运营区" label-width="90">
<el-select style="width: 85%" v-model="form.areaIds" multiple placeholder="请绑定运营区">
<el-option
v-for="item in areaOptions"
:key="item.areaId"
:label="item.areaName"
:value="item.areaId"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div v-if="form.parentId != 0">
<el-row>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="是否开启分账" label-width="120" prop="isProfitSharing">-->
<!-- <el-switch v-model="form.isProfitSharing" class="drawer-switch" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="是否有独立支付账户" label-width="120" prop="separateAccount">-->
<!-- <el-radio-group v-model="form.separateAccount">-->
<!-- <el-radio-->
<!-- v-for="dict in dict.type.sys_yes_no"-->
<!-- :key="dict.value"-->
<!-- :label="dict.value"-->
<!-- >{{dict.label}}</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="平台服务费(%)" label-width="90" prop="platformServiceFee">
<el-input style="width: 78%" v-model="form.platformServiceFee" placeholder="请输入平台服务费" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提现手续费类型" label-width="120" prop="handlingChargeType">
<el-radio-group v-model="form.handlingChargeType">
<el-radio
v-for="dict in dict.type.et_handling_charge_type"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="充值手续费" prop="handlingCharge">
<el-input v-model="form.handlingCharge" placeholder="请输入充值手续费" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.handlingChargeType == '1'">
<el-form-item label="比例(‰)" >
<el-input v-model="form.withdrawHandlingCharge" placeholder="请输入手续费" />
</el-form-item>
</el-col>
<el-col :span="12" v-else>
<el-form-item label="每笔(元)" >
<el-input v-model="form.withdrawHandlingCharge" placeholder="请输入手续费" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="收款码" prop="collectionCode">
<image-upload v-model="form.collectionCode" :limit="1"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否使用创享电动车小程序" label-width="160" prop="isUsePlatformApp">
<el-switch v-model="form.isUsePlatformApp" class="drawer-switch" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" v-show="form.isUsePlatformApp != true">
<el-form-item label="appSecret" prop="appSecret">
<el-input v-model="form.appSecret" placeholder="请输入appSecret" />
</el-form-item>
</el-col>
<el-col :span="12" v-show="form.isUsePlatformApp != true">
<el-form-item label="appid" prop="appid">
<el-input style="width: 100%" v-model="form.appid" placeholder="请输入appid" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" v-show="form.isUsePlatformApp != true">
<el-form-item label="小程序名称" prop="appName" label-width="90px">
<el-input style="width: 100%" v-model="form.appName" placeholder="请输入小程序名称" />
</el-form-item>
</el-col>
<el-col :span="12" v-show="form.isUsePlatformApp != true">
<el-form-item label="域名" prop="domain">
<el-input style="width: 100%" v-model="form.domain" placeholder="请输入域名" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 添加或修改资金流水对话框 -->
<el-dialog :title="title2" :visible.sync="open2" width="500px" append-to-body>
<el-form ref="form2" :model="form2" :rules="rules2" label-width="120px">
<el-form-item label="提现方式" prop="method">
<el-radio-group v-model="form2.method">
<el-radio
v-for="dict in dict.type.et_withdraw_method"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="提现金额：" prop="amount">
<el-input style="width: 40%" v-model="form2.amount" placeholder="请输入提现金额" /> 元
</el-form-item>
<el-form-item label="可用余额">
<span style="color: red;font-weight: 700">{{balance}}</span> 元
</el-form-item>
<el-form-item v-if="form2.amount" label="提示：" style="font-weight: 300;color: red">
<span class="amoun-tips" >提现金额：{{form2.amount}}元，手续费：{{formattedFee}} 元，实际到账：{{actualAmount}} 元</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="withdrawSubmit">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listDept,
getDept,
delDept,
addDept,
updateDept,
listDeptExcludeChild,
listDept2
} from '@/api/system/dept'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listArea } from '../../../api/system/area'
import { fastSearch } from '@/api/user/user'
import { getUser } from '@/api/system/user'
import { withdraw } from '@/api/system/flow'
export default {
name: "Dept",
dicts: ['sys_normal_disable','sys_yes_no','et_handling_charge_type','et_withdraw_method'],
components: { Treeselect },
computed: {
formattedFee() {
let fee;
// console.log("this.handlingChargeType", this.handlingChargeType)
if(this.handlingChargeType === '1'){
// console.log("1111111111111")
let withdrawHandlingCharge = parseFloat(this.withdrawHandlingCharge)/1000;
// 计算手续费
let fee1 = this.form2.amount * withdrawHandlingCharge;
// 保留两位小数，并确保四舍五入
fee = fee1.toFixed(2);
}else{
// console.log("22222222222")
fee = parseFloat(this.withdrawHandlingCharge);
}
// console.log("fee============",fee)
// 判断手续费是否为0
if (fee === 0) {
return '0.00 （免手续费）';
} else {
return `${fee} `;
}
},
actualAmount() {
let amount = this.form2.amount;
let fee;
console.log("this.handlingChargeType", this.handlingChargeType)
console.log("this.withdrawHandlingCharge", this.withdrawHandlingCharge)
if(this.handlingChargeType === '1'){
let withdrawHandlingCharge = parseFloat(this.withdrawHandlingCharge)/1000;
let fee1 = this.form2.amount * withdrawHandlingCharge;
// 四舍五入到两位小数
fee = Math.round(fee1 * 100) / 100;
// 计算实际到账金额并四舍五入到两位小数
}else{
fee = parseFloat(this.withdrawHandlingCharge);
}
let actual = amount - fee;
actual = actual.toFixed(2);
return `${actual} `;
}
},
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 表格树数据
deptList: [],
// appUserId: null,
// 总条数
total: 0,
// 代理商树选项
deptOptions: [],
balance: null,
options: [],
// 运营区选项
areaOptions: [],
// 默认排序
defaultSort: {prop: 'createTime', order: 'descending'},
// 弹出层标题
title: "",
title2: "",
userName:null,
// 是否显示弹出层
open: false,
open2: false,
loading2: false,
// 是否展开，默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
deptName: undefined,
status: undefined,
phonenumber: null,
areaName: undefined,
pageNum: 1,
pageSize: 20,
},
// 表单参数
form: {
// isProfitSharing: 'N'
},
form2: {
method: '1'
},
// 表单校验
rules: {
parentId: [
{ required: true, message: "上级代理商不能为空", trigger: "blur" }
],
deptName: [
{ required: true, message: "代理商名称不能为空", trigger: "blur" }
],
handlingChargeType: [
{ required: true, message: "手续费类型不能为空", trigger: "blur" }
],
handlingCharge: [
{ required: true, message: "手续费不能为空", trigger: "blur" }
],
// orderNum: [
// { required: true, message: "显示排序不能为空", trigger: "blur" }
// ],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phone: [
{ required: true, message: "联系电话不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
},
rules2: {
amount: [
{ required: true, message: "提现金额不能为空", trigger: "blur" },
{ pattern: /^\d+$/, message: '提现金额必须为正整数', trigger: 'blur' },
// 提现金额不能小于 1
{
validator: (rule, value, callback) => {
if (value < 1) {
callback(new Error('提现金额不能小于1'));
} else {
callback();
}
},
trigger: 'blur',
},
// 不能超过 balance 值
{
validator: (rule, value, callback) => {
if (value > this.balance) {
callback(new Error('提现金额不能超过可用余额'));
} else {
callback();
}
},
trigger: 'blur',
},
],
method: [
{ required: true, message: "提现方式不能为空", trigger: "blur" },
]
}
};
},
created() {
console.log("当前用户信息：",this.$store.state.user.id)
const owner = this.$route.params && this.$route.params.owner;
if (owner != null) {
this.queryParams.deptName = owner;
}
this.userName = this.$store.state.user.name;
let userId = this.$store.state.user.id;
getUser(userId).then(response => {
this.user = response.data;
});
this.getList();
},
methods: {
withdrawSubmit(){
console.log("this.form2",this.form2)
this.$refs["form2"].validate(valid => {
if (valid) {
withdraw(this.form2).then(response => {
this.$modal.msgSuccess("操作成功");
this.open2 = false;
this.getList();
});
}
});
},
formatWithdrawHandlingCharge(charge, chargeType) {
if (!charge || charge === '0') {
return '';
}
if (chargeType === '1') {
return `${charge}‰`;
} else if (chargeType === '2') {
return `每笔${charge}元`;
}
return charge;
},
/** 排序触发事件 */
handleSortChange(column, prop, order) {
this.queryParams.orderByColumn = column.prop;
this.queryParams.isAsc = column.order;
this.getList();
},
queryPhonenumber(query) {
console.log("query:",query)
if (query !== '') {
this.loading2 = true;
setTimeout(() => {
this.loading2 = false;
fastSearch({"phonenumber":query}).then(response => {
this.options = response.data;
}
);
}, 200);
} else {
this.options = []
}
},
/** 查询代理商列表 */
getList() {
this.loading = true;
listDept2(this.queryParams).then(response => {
this.deptList = this.handleTree(response.rows, "deptId");
this.total = response.total;
this.loading = false;
});
},
/** 转换代理商数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.deptId,
label: node.deptName,
children: node.children
};
},
// 取消按钮
cancel() {
this.open = false;
this.open2 = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deptId: undefined,
parentId: undefined,
deptName: undefined,
orderNum: undefined,
leader: undefined,
phone: undefined,
email: undefined,
status: "0",
// isProfitSharing: false,
separateAccount: 'N',
platformServiceFee: '4',
handlingCharge: '5.4',
withdrawHandlingCharge: '5.4',
handlingChargeType: '1',
isUsePlatformApp: true,
merchantId: null,
apiV3Key: null,
notifyUrl: null,
privateKeyPath: null,
merchantSerialNumber: null,
refundNotifyUrl: null
};
this.balance = 0,
this.form2 = {
handlingCharge: null,
withdrawHandlingCharge: null,
handlingChargeType: null,
};
this.resetForm("form");
this.resetForm("form2");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
this.open = true;
this.title = "添加代理商";
listDept2({status: '0',pageNum:1,pageSize:999 }).then(response => {
// console.log("response=============",response)
this.deptOptions = response.data;
listArea({ pageNum: 1, pageSize: 999,}).then(response => {
this.areaOptions = response.rows;
this.form.parentId = 100;
});
});
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
getDept(row.deptId).then(response => {
this.form = response.data;
this.$set(this.form, "areaIds", response.areaIds);
this.open = true;
this.title = "修改代理商";
// this.form.isProfitSharing = this.form.isProfitSharing === 'true';
this.form.isUsePlatformApp = this.form.isUsePlatformApp === 'true';
console.log("userName==========="+response.data.userName)
// this.appUserId = this.form.appUserId;
// if(response.data.userName){
// this.form.appUserId = response.data.userName;
// }
listArea({ pageNum: 1, pageSize: 999}).then(response => {
this.areaOptions = response.rows;
});
listDeptExcludeChild(row.deptId).then(response => {
this.deptOptions = this.handleTree(response.data, "deptId");
if (this.deptOptions.length == 0) {
const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
this.deptOptions.push(noResultsOptions);
}
});
});
},
withdraw(row){
this.form2.method = '1';
console.log("row",row)
this.reset();
getDept(row.deptId).then(response => {
this.form2.deptId = response.data.deptId;
this.balance = response.data.balance;
this.withdrawHandlingCharge = response.data.withdrawHandlingCharge;
this.handlingChargeType = response.data.handlingChargeType;
this.open2 = true;
this.title2 = "申请提现";
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.deptId != undefined) {
updateDept(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDept(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
return delDept(row.deptId);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
};
</script>
<style>
.balance-cell {
font-weight: bold;
color: red;
}
.el-form-item__tip{
color: #ff0000;
font-size: 12px;
line-height: 18px;
}
.amoun-tips{
color: red;
font-size: 12px;
font-weight: 700;
}
</style>