You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

631 lines
26 KiB
Vue

<template>
<el-dialog :close-on-click-modal="false" v-dialogDrag append-to-body :visible.sync="dialogVisible" :title="title" width="80%" :before-close="handleClose">
<div class="detailDivFrom">
<el-form :model="form" :inline="true" label-width="80px">
<el-form-item label="单 号:">
<div class="activeFormDiv">
{{ form.cashNum }}
</div>
</el-form-item>
<el-form-item label="时 间:">
<div class="activeFormDiv" style="width: 150px">
{{ form.cashDate }}
</div>
</el-form-item>
<el-form-item label="名 字:">
<div class="activeFormDiv">
{{ form.memberName }}
</div>
</el-form-item>
<el-form-item label="手机号码:">
<div class="activeFormDiv">
{{ form.mobilePhone }}
</div>
</el-form-item>
<el-form-item label="补单日期:" v-show="form.isAddition == 1">
<div class="activeFormDiv">
{{ form.additionDate }}
</div>
</el-form-item>
</el-form>
<div class="flex justify-start align-start" style="width:100%">
<div class="into-table-width">
<el-table :data="list" ref="list" @row-click="rowClick" max-height="450" row-key="index">
<el-table-column type="expand">
<template slot-scope="props">
<div class="flex justify-start align-center flex-wrap">
<el-form inline class="margin-top">
<el-form-item label='美发师'>
<div class="flex align-center form-width-m">
<el-select filterable default-first-option v-model="props.row.zhonggongLists" clearable @clear="clear(props.row,'zhonggongList')" placeholder="请选择" @change="handleChange($event,props.row,'zhonggongList')">
<el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.id">
</el-option>
</el-select>
<div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'zhonggongList')"></div>
</div>
</el-form-item>
<el-form-item label='美容师'>
<div class="flex align-center form-width-m">
<el-select filterable default-first-option v-model="props.row.largeLists" clearable @clear="clear(props.row,'largeList')" placeholder="请选择" @change="handleChange($event,props.row,'largeList')">
<el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.id">
</el-option>
</el-select>
<div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'largeList')"></div>
</div>
</el-form-item>
<el-form-item label='技师'>
<div class="flex align-center form-width-m">
<el-select filterable default-first-option v-model="props.row.technicianLists" clearable @clear="clear(props.row,'technicianList')" placeholder="请选择" @change="handleChange($event,props.row,'technicianList')">
<el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.id">
</el-option>
</el-select>
<div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'technicianList')"></div>
</div>
</el-form-item>
<el-form-item label='助理'>
<div class="flex align-center form-width-m">
<el-select filterable default-first-option v-model="props.row.smallLists" clearable @clear="clear(props.row,'smallList')" placeholder="请选择" @change="handleChange($event,props.row,'smallList')">
<el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.id">
</el-option>
</el-select>
<div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'smallList')"></div>
</div>
</el-form-item>
<el-form-item label='高管'>
<div class="flex align-center form-width-m">
<el-select filterable default-first-option v-model="props.row.managerLists" clearable @clear="clear(props.row,'managerList')" placeholder="请选择" @change="handleChange($event,props.row,'managerList')">
<el-option v-for="(item,index) in managerOptions" :key="index" :label="item.label" :value="item.id">
</el-option>
</el-select>
<div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'managerList')"></div>
</div>
</el-form-item>
<el-form-item label='管理层'>
<div class="flex align-center form-width-m">
<el-select filterable default-first-option v-model="props.row.adminLists" clearable @clear="clear(props.row,'adminList')" placeholder="请选择" @change="handleChange($event,props.row,'adminList')">
<el-option v-for="(item,index) in adminOptions" :key="index" :label="item.label" :value="item.id">
</el-option>
</el-select>
<div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'adminList')"></div>
</div>
</el-form-item>
</el-form>
<div class="border-radius-10 border margin-left-xs bg-white padding-xs" style="width:700px" v-if="props.row.rechargeConsumeList.length!=0">
<el-table :data="props.row.rechargeConsumeList" @row-click="rowClick" :summary-method="getSummaries" show-summary max-height="350">
<el-table-column align="center" prop="rechargeTypeName" label="卡付名称" min-width="130"></el-table-column>
<el-table-column align="center" prop="cardRestMoney" label="剩余金额" width="100"></el-table-column>
<el-table-column align="center" prop="spendMoney" label="本次支付" width="100"></el-table-column>
<el-table-column align="center" prop="discoutMoney" label="抵扣支付" width="90"></el-table-column>
<el-table-column align="center" prop="cardGiftMoney" label="剩余赠送" width="100"></el-table-column>
<el-table-column align="center" prop="accountGiftSpendMoney" label="赠送支付" width="100"></el-table-column>
</el-table>
</div>
</div>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip min-width="100" align="center" prop="projectNum" label="项目编码"></el-table-column>
<el-table-column show-overflow-tooltip min-width="120" align="center" prop="projectName" label="项目名称"></el-table-column>
<el-table-column show-overflow-tooltip min-width="100" align="center" prop="transactionPrice" label="项目金额"></el-table-column>
<el-table-column show-overflow-tooltip min-width="100" align="center" prop="" label="支付类型">
<template slot-scope="scope">
<el-tooltip v-if="scope.row.courseAccountId!=null" class="item" effect="dark" content="疗程付" placement="top">
<div>{{scope.row.courseAccountId!=null?'疗程付':'卡付/现付'}}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="scope.row.rechargeConsumeLists" placement="top" v-else-if="scope.row.rechargeConsumeList.length!=0">
<span>卡付</span>
</el-tooltip>
<div v-else>现付</div>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip min-width="100" align="center" prop="" label="实付金额">
<template slot-scope="scope">
<el-tooltip v-if="scope.row.courseAccountId!=null" class="item" effect="dark" content="疗程付" placement="top">
<div>{{scope.row.courseAccountId!=null?scope.row.transactionPrice:scope.row.collectionRechargeAmount+scope.row.collectionCashAmount}}</div>
</el-tooltip>
<el-tooltip v-else class="item" effect="dark" content="" placement="top">
<div>{{scope.row.courseAccountId!=null?scope.row.transactionPrice:scope.row.collectionRechargeAmount+scope.row.collectionCashAmount}}</div>
</el-tooltip>
</template>
</el-table-column>
<!-- <el-table-column show-overflow-tooltip min-width="100" align="center" prop="collectionAmount" label="实付金额"></el-table-column> -->
<el-table-column show-overflow-tooltip min-width="75" align="center" prop="collectionRechargeAmount" label="卡付金额"></el-table-column>
<el-table-column show-overflow-tooltip min-width="75" align="center" prop="collectionCashAmount" label="现付金额"></el-table-column>
<el-table-column show-overflow-tooltip min-width="75" align="center" prop="collectionAmount" label="性别">
<template slot-scope="scope">
<div>{{scope.row.sex*1==0?'男':'女'}}</div>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip min-width="100" align="center" prop="remark" label="备注"></el-table-column>
</el-table>
</div>
<div class=' border-radius-10 border margin-left-xs bg-white padding-xs' style="width:280px" v-if="list.length!=0">
<el-table :data="form.payLists" :summary-method="getSummaries" show-summary>
<el-table-column align="center" prop="payName" min-width="100" label="支付方式"></el-table-column>
<el-table-column align="center" prop="payMoney" min-width="80" label="本次支付"></el-table-column>
</el-table>
</div>
</div>
<staffratio ref="staffratio" @staffratioData="staffratioData"></staffratio>
</div>
<div slot="footer" class="dialog-footer" v-if="title=='明细'">
<el-button type="primary" plain size="mini" @click="dialogVisible = false">关闭</el-button>
</div>
<div slot="footer" class="dialog-footer" v-else>
<el-button type="primary" plain size="mini" @click="handleClose">取消</el-button>
<el-button :disabled="form.isCancel==1" type="primary" size="mini" @click="confirm()">{{title==''?title:""}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {
selectList,
cashcancel,
cashEditStaff,
QuerCompetent,
selectListType,
selectOne,
} from "@/api/eashier.js";
import staffratio from "../staffratio";
export default {
components: { staffratio },
data() {
return {
form: {}, //主对象
list: [], //主数组
dialogVisible: false, //弹窗开关
title: "", //弹窗标题
options: [],
editIndex: -1,
adminOptions: [],
managerOptions: [],
expand: [],
};
},
methods: {
//关闭弹窗前的回调方法
handleClose() {
console.log(123);
Object.assign(this.$data, this.$options.data.call(this));
this.form = {};
this.list = [];
this.dialogVisible = false;
this.$emit("editformData");
},
clear(row, text) {
console.log(row);
console.log(text);
let form = { ...row };
form[text] = [];
console.log(form);
this.list.splice(row.index, 1, form);
},
openStaffRatio(row, index, text) {
this.editIndex = index;
this.$refs.staffratio.show(row, text);
},
staffratioData(v) {
let form = this.list[this.editIndex];
let texts = v.text + "s";
form[v.text] = v.list;
form[texts] = v.list[0].label;
this.list.splice(this.editIndex, 1, form);
},
handleChange(data, row, text) {
let form = { ...row };
console.log(data);
if (text == "managerList") {
console.log(this.managerOptions);
this.managerOptions.forEach((item, index) => {
if (item.id == data) {
item.ratio = 100;
form[text] = [];
form[text].push(item);
form.texts = item.label;
}
});
} else if (text == "adminList") {
this.adminOptions.forEach((item, index) => {
if (item.id == data) {
item.ratio = 100;
form[text] = [];
form[text].push(item);
form.texts = item.label;
}
});
} else {
this.options.forEach((item, index) => {
if (item.id == data) {
item.ratio = 100;
form[text] = [];
form[text].push(item);
form.texts = item.label;
}
});
}
console.log(form);
this.list.splice(row.index, 1, form);
// this.$refs.list.toggleRowExpansion(row);
},
//点击选中
rowClick(row) {
this.$refs.list.toggleRowExpansion(row);
},
//组件传值
show(form, title) {
Object.assign(this.$data, this.$options.data.call(this));
console.log(form);
this.title = title;
this.list = [];
this.form = { ...form };
this.list = form.projectList;
console.log("🚀 ~ file: editform.vue ~ line 253 ~ show ~ this.list", this.list)
this.list.forEach((item, index) => {
item.collectionAmount= item.collectionRechargeAmount*1+item.collectionCashAmount*1
item.rechargeConsumeList.forEach((items) => {
items.cardOver = items.cardConsumeMoney;
items.cardGiftOver = items.giftConsumeMoney;
if (items.type == 1) {
items.discoutMoney =
(items.spendMoney / (items.discount / 100)).toFixed(2) * 1;
} else {
items.discoutMoney = items.spendMoney;
}
if (item.rechargeConsumeList.length != 0) {
item.rechargeConsumeLists =
"卡付: " + items.rechargeTypeName + " - " + items.spendMoney;
} else {
item.rechargeConsumeLists = "无卡付";
}
});
item.payLists.forEach((items) => {
if (item.payLists.length != 0) {
item.payListss = "现付 :" + items.payName + " - " + items.payMoney;
} else {
item.payListss = "无现付";
}
});
item.index = index;
if (item.largeList.length != 0) {
item.largeLists =
item.largeList[0].brandNumber + "-" + item.largeList[0].staffName;
} else {
item.largeLists = "";
}
if (item.zhonggongList.length != 0) {
item.zhonggongLists =
item.zhonggongList[0].brandNumber +
"-" +
item.zhonggongList[0].staffName;
} else {
item.zhonggongLists = "";
}
if (item.smallList.length != 0) {
item.smallLists =
item.smallList[0].brandNumber + "-" + item.smallList[0].staffName;
} else {
item.smallLists = "";
}
if (item.technicianList.length != 0) {
item.technicianLists =
item.technicianList[0].brandNumber +
"-" +
item.technicianList[0].staffName;
} else {
item.technicianLists = "";
}
selectOne({ type: 1, orderId: item.cashId }).then((res) => {
if (res.code == "000000") {
let managerList = [];
let adminList = [];
res.rows.forEach((item) => {
if (item.staffType == 0) {
item.staffNames = item.brandNumber + "--" + item.staffName;
managerList.push(item);
}
if (item.staffType == 1) {
item.staffNames = item.brandNumber + "--" + item.staffName;
adminList.push(item);
}
});
if (managerList.length == 0) {
managerList.push({ ratio: 100 });
}
if (adminList.length == 0) {
adminList.push({ ratio: 100 });
}
item.managerList = managerList;
item.adminList = adminList;
adminList.forEach((items, index) => {
if (items.id) {
if (index == 0) {
item.adminLists = items.brandNumber + "-" + items.staffName;
}
} else {
item.adminLists = "";
}
});
managerList.forEach((items, index) => {
if (items.id) {
if (index == 0) {
item.managerLists = items.brandNumber + "-" + items.staffName;
}
} else {
item.managerLists = "";
}
});
} else {
this.$alert(res.message, "加载门店高管", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
});
this.dialogVisible = true;
this.getData();
},
//获取数据
async getData() {
selectListType({ type: 0, storeId: this.form.storeId }).then((res) => {
if (res.code == "000000") {
res.rows.forEach((item) => {
delete item.state;
item.label = item.brandNumber + "-" + item.staffName;
item.ratio = 100;
});
this.adminOptions = res.rows;
} else {
this.$alert(res.message, "加载员工提示", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
QuerCompetent({
type: 0,
pageSize: 999,
storeId: this.form.storeId,
}).then((res) => {
if (res.code == "000000") {
res.pageInfo.list.forEach((item) => {
delete item.state;
item.label = item.brandNumber + "-" + item.staffName;
item.ratio = 100;
});
this.managerOptions = res.pageInfo.list;
console.log(this.managerOptions);
} else {
this.$alert(res.message, "加载高管提示", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
selectList({ storeId: this.form.storeId }).then((res) => {
if (res.code == "000000") {
res.rows.forEach((item) => {
delete item.state;
item.label = item.brandNumber + "-" + item.staffName;
item.ratio = 100;
});
this.options = Array.from(new Set(res.rows));
} else {
this.$alert(res.message, "加载员工列表", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
},
//确定返回方法
confirm() {
if (this.title == "作废") {
var list = [];
this.list.forEach((item) => {
if (item.payLists != []) {
item.payLists.forEach((items) => {
delete items.docId;
delete items.id;
delete items.type;
});
}
var items = {
projectId: item.id,
id: item.cashId,
memberId: item.memberId,
memberName: item.memberName,
courseAccountId: item.courseAccountId,
mobilePhone: item.mobilePhone,
menberIdentityCard: item.menberIdentityCard,
cashNum: item.cashNum,
cashDate: item.cashDate,
storeId: item.storeId,
numberTimes: 1,
storeName: item.storeName,
projectName: item.projectName,
transactionPrice: item.transactionPrice,
payLists: item.payLists,
rechargeAccountList: item.rechargeConsumeList,
collectionCashAmount: item.collectionCashAmount,
largeList: item.largeList,
zhonggongList: item.zhonggongList,
smallList: item.smallList,
technicianList: item.technicianList,
};
list.push(items);
});
cashcancel(list).then((res) => {
if (res.code == "000000") {
this.$message.success({
message: res.message,
});
this.dialogVisible = false;
this.$emit("editformData");
} else {
this.$alert(res.message, "提示", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
} else {
var list = [];
this.list.forEach((item) => {
delete item.index;
let salesmens = [];
console.log(item);
item.managerList.forEach((items) => {
if (items.id) {
items.staffType = 0;
salesmens.push(items);
}
});
item.adminList.forEach((items) => {
if (items.id) {
items.staffType = 1;
salesmens.push(items);
}
});
item.salesmens = salesmens;
var item2 = {
salesmens: item.salesmens,
id: item.cashId,
projectId: item.id,
cashDate: item.cashDate,
largeList: item.largeList,
zhonggongList: item.zhonggongList,
smallList: item.smallList,
technicianList: item.technicianList,
courseAccountId: item.courseAccountId,
salesAchievement: item.salesAchievement,
salesCommission: item.salesCommission,
cardSalesAchievement: item.cardSalesAchievement,
cardSalesCommission: item.cardSalesCommission,
achievementLarge: item.achievementLarge,
achievementZhonggong: item.achievementZhonggong,
achievementTechnician: item.achievementTechnician,
achievementSmall: item.achievementSmall,
commissionLarge: item.commissionLarge,
commissionZhonggong: item.commissionZhonggong,
commissionTechnician: item.commissionTechnician,
commissionSmall: item.commissionSmall,
cardAchievementLarge: item.cardAchievementLarge,
cardAchievementZhonggong: item.cardAchievementZhonggong,
cardAchievementTechnician: item.cardAchievementTechnician,
cardAchievementSmall: item.cardAchievementSmall,
cardCommissionLarge: item.cardCommissionLarge,
cardCommissionZhonggong: item.cardCommissionZhonggong,
cardCommissionZhonggong: item.cardCommissionZhonggong,
cardCommissionTechnician: item.cardCommissionTechnician,
cardCommissionSmall: item.cardCommissionSmall,
courseAccountId: item.courseAccountId,
payLists: item.payLists,
storeId: item.storeId,
rechargeAccountList: item.rechargeConsumeList,
amount: item.amount,
cashAmount: item.cashAmount,
collectionIntegralAmount: item.collectionIntegralAmount,
collectionCashAmount: item.collectionCashAmount,
collectionRechargeAmount: item.collectionRechargeAmount,
};
list.push(item2);
});
cashEditStaff(list).then((res) => {
if (res.code == "000000") {
this.$message.success({
message: res.message,
});
this.dialogVisible = false;
this.$emit("editformData");
} else {
this.$alert(res.message, "提示", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
}
},
//数组按对应字段合计返回方法
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "合计";
return;
}
const values = data.map((item) => Number(item[column.property]));
if (column.property == "discoutMoney") {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
sums[index] = "--";
}
}, 0);
sums[index] += " ";
} else if (column.property == "spendMoney") {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
sums[index] = "--";
}
}, 0);
sums[index] += " ";
} else if (column.property == "payMoney") {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
sums[index] = "--";
}
}, 0);
sums[index] += " ";
} else {
sums[index] = "--";
}
});
return sums;
},
},
};
</script>
<style>
</style>