Skip to content

C
confucius
Commit 9488d898 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent d3400066
Hide whitespace changes
Inline Side-by-side
Showing with 898 additions and 743 deletions
src/api/course/index.js
View file @ 9488d898
...@@ -240,46 +240,66 @@ export function queryCourseJobPageList(data) { ...@@ -240,46 +240,66 @@ export function queryCourseJobPageList(data) {
/** /**
* 获取课程优惠类型列表 * 获取课程优惠类型列表
*/ */
export function queryCoursePreferentialType() export function queryCoursePreferentialType() {
{ return request({
return request({ url: "/Course/GetCoursePreferentialType",
url: "/Course/GetCoursePreferentialType", method: 'post',
method: 'post', })
})
} }
/** /**
* 获取课程优惠列表 * 获取课程优惠列表
*/ */
export function queryCoursePreferentialList(data) export function queryCoursePreferentialList(data) {
{ return request({
return request({ url: "/Course/GetCoursePreferentialList",
url: "/Course/GetCoursePreferentialList", method: 'post',
method: 'post', data
data })
})
} }
/** /**
* 新增修改课程优惠 * 新增修改课程优惠
*/ */
export function saveCoursePreferential(data) export function saveCoursePreferential(data) {
{ return request({
return request({ url: "/Course/SetBeatchCoursePreferential",
url: "/Course/SetBeatchCoursePreferential", method: 'post',
method: 'post', data
data })
})
} }
/** /**
* 新增修改课程优惠 * 新增修改报价单
*/ */
export function saveCourseOffer(data) export function saveCourseOffer(data) {
{ return request({
return request({ url: "/CourseOffer/SetCourseOffer",
url: "/CourseOffer/SetCourseOffer", method: 'post',
method: 'post', data
data })
}) }
}
\ No newline at end of file /**
* 获取课程报价列表
*/
export function queryCourseOfferPage(data) {
return request({
url: "/CourseOffer/GetCourseOfferPage",
method: 'post',
data
})
}
/**
* 获取报价单详情
*/
export function queryCourseOfferInfo(data) {
return request({
url: "/CourseOffer/GetCourseOffer",
method: 'post',
data
})
}
\ No newline at end of file
src/components/sale/quotation-form.vue
View file @ 9488d898
<template> <template>
<q-card class="q-px-md" style="width:750px;max-width:800px;"> <q-card class="q-px-md" style="width:750px;max-width:800px;">
<q-card-section class="row items-center q-pb-none"> <q-card-section class="row items-center q-pb-none">
<div class="text-h6">创建报价单</div> <div class="text-h6">{{model.Id==0?"创建报价单":"修改报价单"}}</div>
<q-space /> <q-space />
<q-btn icon="close" flat round dense v-close-popup /> <q-btn icon="close" flat round dense v-close-popup />
</q-card-section> </q-card-section>
<q-card-section style="max-height:75vh;" class="scroll"> <q-card-section style="max-height:75vh;" class="scroll">
<q-banner <q-banner rounded class="bg-orange-2 text-black q-py-none q-px-md q-mb-md" style="min-height:30px;">
rounded
class="bg-orange-2 text-black q-py-none q-px-md q-mb-md"
style="min-height:30px;"
>
<div class="row items-center"> <div class="row items-center">
<span class="q-mr-md"> <span class="q-mr-md">
<inline-svg <inline-svg class="svg-icon svg-icon-orange" src="icons/svg/Code/Warning-2.svg"></inline-svg>
class="svg-icon svg-icon-orange"
src="icons/svg/Code/Warning-2.svg"
></inline-svg>
</span> </span>
<span style="font-size:12px;" <span style="font-size:12px;">报价单价格系统将进行自动计算，如需额外的优惠请创建报价单后进行申请</span>
>报价单价格系统将进行自动计算，如需额外的优惠请创建报价单后进行申请</span
>
</div> </div>
</q-banner> </q-banner>
<div class="row"> <div class="row">
<div class="col q-mr-md"> <div class="col q-mr-md">
<q-input <q-input standout bottom-slots v-model="model.Name" ref="Name" label="报价单名称" dense />
standout
bottom-slots
v-model="model.Name"
ref="Name"
label="报价单名称"
dense
/>
</div> </div>
<div class="col"> <div class="col">
<q-select <q-select dense standout behavior="menu" v-model="model.CustomerSource" ref="CustomerSource"
dense :options="CustomerSources" option-label="name" option-value="id" label="客户来源" emit-value map-options
standout :rules="[val => !!val || '请选择客户来源']" />
behavior="menu"
v-model="model.CustomerSource"
ref="CustomerSource"
:options="CustomerSources"
option-label="name"
option-value="id"
label="客户来源"
emit-value
map-options
:rules="[val => !!val || '请选择客户来源']"
/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col q-mr-md"> <div class="col q-mr-md">
<q-select <q-select dense standout behavior="menu" v-model="model.CustomerType" ref="CustomerType"
dense :options="CustomerTypes" option-label="name" option-value="id" label="客户类型" emit-value map-options
standout @input="changeDiscountMoney" :rules="[val => !!val || '请选择客户类型']" />
behavior="menu"
v-model="model.CustomerType"
ref="CustomerType"
:options="CustomerTypes"
option-label="name"
option-value="id"
label="客户类型"
emit-value
map-options
@input="changeDiscountMoney"
:rules="[val => !!val || '请选择客户类型']"
/>
</div> </div>
<div class="col"> <div class="col">
<q-input <q-input standout bottom-slots v-model="model.JoinNum" ref="JoinNum" label="报名人数" dense mask="#" fill-mask="0"
standout reverse-fill-mask :rules="[val => !!val || '请输入报名人数']" @input="changeDiscountMoney">
bottom-slots
v-model="model.JoinNum"
ref="JoinNum"
label="报名人数"
dense
mask="#"
fill-mask="0"
reverse-fill-mask
:rules="[val => !!val || '请输入报名人数']"
@input="changeDiscountMoney"
>
<template v-slot:append> <template v-slot:append>
<span style="font-size:14px;">人</span> <span style="font-size:14px;">人</span>
</template> </template>
...@@ -91,26 +41,11 @@ ...@@ -91,26 +41,11 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col q-mr-md"> <div class="col q-mr-md">
<q-input <q-input standout bottom-slots v-model="model.CustomerName" ref="CustomerName" label="客户姓名" dense
standout :rules="[val => !!val || '请输入客户姓名']" />
bottom-slots
v-model="model.CustomerName"
ref="CustomerName"
label="客户姓名"
dense
:rules="[val => !!val || '请输入客户姓名']"
/>
</div> </div>
<div class="col"> <div class="col">
<q-input <q-input standout bottom-slots v-model="model.CustomerTel" label="客户电话" dense mask="#" reverse-fill-mask />
standout
bottom-slots
v-model="model.CustomerTel"
label="客户电话"
dense
mask="#"
reverse-fill-mask
/>
</div> </div>
</div> </div>
<div class="text-subtitle2 text-weight-bold q-mb-md"> <div class="text-subtitle2 text-weight-bold q-mb-md">
...@@ -137,44 +72,21 @@ ...@@ -137,44 +72,21 @@
/> />
</div> --> </div> -->
<div class="col"> <div class="col">
<q-select <q-select dense standout behavior="menu" v-model="chosenCourse" :options="courseOptions"
dense @filter="filterCourseFn" input-debounce="0" use-input option-label="CourseName" option-value="CourseId"
standout emit-value map-options :placeholder="!chosenCourse ? '添加客户需要的课程' : ''" clearable />
behavior="menu"
v-model="chosenCourse"
:options="courseOptions"
@filter="filterCourseFn"
input-debounce="0"
use-input
option-label="CourseName"
option-value="CourseId"
emit-value
map-options
:placeholder="!chosenCourse ? '添加客户需要的课程' : ''"
clearable
/>
</div> </div>
<div class="q-ml-md"> <div class="q-ml-md">
<q-btn color="primary" label="添加" @click="addCourse"></q-btn> <q-btn color="primary" label="添加" @click="addCourse"></q-btn>
</div> </div>
</div> </div>
<div class="q-mt-md"> <div class="q-mt-md">
<q-table <q-table :pagination="pageInfo" no-data-label="暂无相关数据" flat
:pagination="pageInfo" class="sticky-column-table sticky-header-table sticky-right-column-table no-bottom-table" separator="none"
no-data-label="暂无相关数据" :data="chosenCourses" :columns="columns" row-key="name">
flat
class="sticky-column-table sticky-header-table sticky-right-column-table no-bottom-table"
separator="none"
:data="chosenCourses"
:columns="columns"
row-key="name"
>
<template v-slot:body-cell-DiscountRemark="props"> <template v-slot:body-cell-DiscountRemark="props">
<q-td :props="props" class="text-negative"> <q-td :props="props" class="text-negative">
<div <div v-for="(x, i) in props.value.split('^')" style="border-bottom:1px dotted #f5f6f7;">
v-for="(x, i) in props.value.split('^')"
style="border-bottom:1px dotted #f5f6f7;"
>
{{ x }} {{ x }}
</div> </div>
</q-td> </q-td>
...@@ -187,44 +99,26 @@ ...@@ -187,44 +99,26 @@
<div style="border-top:1px solid #f5f6f7;" class="row q-py-md"> <div style="border-top:1px solid #f5f6f7;" class="row q-py-md">
<div class="col"> <div class="col">
<span>累计优惠：</span> <span>累计优惠：</span>
<span class="q-ml-xs text-weight-bold" <span class="q-ml-xs text-weight-bold">￥{{
>￥{{
model.TotalPrice ? model.TotalDiscountPrice.toFixed(2) : "0.00" model.TotalPrice ? model.TotalDiscountPrice.toFixed(2) : "0.00"
}}</span }}</span>
>
</div> </div>
<div class="col text-right"> <div class="col text-right">
<span>课程总价：</span> <span>课程总价：</span>
<span class="q-ml-xs text-weight-bold" <span class="q-ml-xs text-weight-bold">￥{{
>￥{{
model.TotalPrice ? model.TotalPrice.toFixed(2) : "0.00" model.TotalPrice ? model.TotalPrice.toFixed(2) : "0.00"
}}</span }}</span>
>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col q-mr-md"></div> <div class="col q-mr-md"></div>
<div class="col"> <div class="col">
<q-input <q-input standout bottom-slots v-model="model.EffectiveEnd" ref="EffectiveEnd" label="报价有效期" dense mask="date"
standout class="cursor-pointer" readonly :rules="[val => !!val || '请选择有效日期']">
bottom-slots
v-model="model.EffectiveEnd"
ref="EffectiveEnd"
label="报价有效期"
dense
mask="date"
class="cursor-pointer"
readonly
:rules="[val => !!val || '请选择有效日期']"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy> <q-popup-proxy>
<q-date <q-date v-model="model.EffectiveEnd" title="" subtitle="报价有效日期">
v-model="model.EffectiveEnd"
title=""
subtitle="报价有效日期"
>
<div class="row items-center justify-end"> <div class="row items-center justify-end">
<q-btn v-close-popup label="确认" color="primary" flat /> <q-btn v-close-popup label="确认" color="primary" flat />
</div> </div>
...@@ -238,393 +132,409 @@ ...@@ -238,393 +132,409 @@
</q-card-section> </q-card-section>
<q-card-actions align="right" class="bg-white"> <q-card-actions align="right" class="bg-white">
<q-btn label="取消" flat color="primary" v-close-popup /> <q-btn label="取消" flat color="primary" v-close-popup />
<q-btn <q-btn label="创建报价单" color="accent" class="q-px-md" style="font-weight:400 !important" @click="saveOffice" />
label="创建报价单"
color="accent"
class="q-px-md"
style="font-weight:400 !important"
@click="saveOffice"
/>
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</template> </template>
<script> <script>
import { import {
queryCourseDropdownList, queryCourseDropdownList,
queryCourseCategoryTree, queryCourseCategoryTree,
saveCourseOffer saveCourseOffer,
} from "../../api/course/index"; queryCourseOfferInfo
import { date } from "quasar"; } from "../../api/course/index";
export default { import {
props: ["obj"], date
data() { } from "quasar";
return { export default {
CustomerTypes: [ props: ["obj"],
{ data() {
id: 1, return {
name: "新客户" CustomerTypes: [{
}, id: 1,
{ name: "新客户"
id: 2, },
name: "续班客户" {
} id: 2,
], name: "续班客户"
CustomerSources: [ }
{ ],
id: 1, CustomerSources: [{
name: "学校介绍" id: 1,
}, name: "学校介绍"
{ },
id: 2, {
name: "朋友介绍" id: 2,
}, name: "朋友介绍"
{ },
id: 3, {
name: "网络广告" id: 3,
} name: "网络广告"
], }
model: {}, ],
columns: [ model: {},
{ columns: [{
name: "CourseName", name: "CourseName",
required: true, required: true,
label: "课程名称", label: "课程名称",
align: "left", align: "left",
field: row => row.CourseName field: row => row.CourseName
}, },
// { {
// name: "OriginalPrice", name: "OriginalPrice",
// required: true, required: true,
// label: "原价", label: "现价",
// align: "left", align: "left",
// field: row => row.OriginalPrice field: row => row.OriginalPrice.toFixed(2)
// }, },
{ {
name: "OriginalPrice", name: "JoinNum",
required: true, required: true,
label: "现价", label: "报名人数",
align: "left", align: "left",
field: row => row.OriginalPrice.toFixed(2) field: row => row.JoinNum
}, },
{ {
name: "JoinNum", name: "DiscountPrice",
required: true, required: true,
label: "报名人数", label: "优惠",
align: "left", align: "left",
field: row => row.JoinNum field: row => row.DiscountPrice.toFixed(2)
}, },
{ {
name: "DiscountPrice", name: "DiscountRemark",
required: true, required: true,
label: "优惠", label: "优惠说明",
align: "left", align: "left",
field: row => row.DiscountPrice.toFixed(2) field: row => row.Remark
}, },
{ {
name: "DiscountRemark", name: "ActualPrice",
required: true, required: true,
label: "优惠说明", label: "小计金额",
align: "left", align: "left",
field: row => row.Remark field: row => row.ActualPrice.toFixed(2)
}
],
TreeCategoryList: [],
pageInfo: {
pageIndex: 1,
pageSize: 12,
rowsPerPage: 12
}, },
{ courses: [],
name: "ActualPrice", courseOptions: [],
required: true, chosenCategory: null,
label: "小计金额", chosenCourse: null,
align: "left", categoryOptions: [],
field: row => row.ActualPrice.toFixed(2) chosenCourses: []
};
},
computed: {
quomodel() {
}
},
created() {
this.getCategorytree();
},
mounted() {
this.initObj();
},
methods: {
//初始化对象
initObj() {
if (this.obj && this.obj.Id > 0) {
queryCourseOfferInfo({
Id: this.obj.Id
}).then(res => {
var tempObj = res.Data;
if (res.Code == 1) {
this.model = {
Id: tempObj.Id,
Name: tempObj.Name,
EffectiveStart: tempObj.EffectiveStart,
EffectiveEnd: tempObj.EffectiveEnd,
CustomerType: tempObj.CustomerType,
CustomerSource: tempObj.CustomerSource,
TotalOriginalPrice: tempObj.TotalOriginalPrice,
TotalPrice: tempObj.TotalPrice,
TotalDiscountPrice: tempObj.TotalDiscountPrice,
CustomerInfo: tempObj.CustomerInfo,
CustomerName: tempObj.CustomerName,
CustomerTel: tempObj.CustomerTel,
OfferDetails: [],
JoinNum: tempObj.JoinNum
};
if (tempObj.OfferDetails && tempObj.OfferDetails.length > 0) {
this.model.OfferDetails = tempObj.OfferDetails;
}
}
})
} else {
this.model = {
Id: 0,
Name: "",
EffectiveStart: "",
EffectiveEnd: "",
CustomerType: null,
CustomerSource: null,
TotalOriginalPrice: 0.0,
TotalPrice: 0.0,
TotalDiscountPrice: 0.0,
CustomerInfo: "",
CustomerName: "",
CustomerTel: "",
OfferDetails: [],
JoinNum: 0
};
} }
],
TreeCategoryList: [],
pageInfo: {
pageIndex: 1,
pageSize: 12,
rowsPerPage: 12
}, },
courses: [], saveOffice() {
courseOptions: [], this.$refs.EffectiveEnd.validate();
chosenCategory: null, this.$refs.CustomerType.validate();
chosenCourse: null, this.$refs.CustomerSource.validate();
categoryOptions: [], this.$refs.CustomerName.validate();
chosenCourses: [] this.$refs.JoinNum.validate();
}; if (
}, !this.$refs.EffectiveEnd.hasError &&
computed: { !this.$refs.CustomerType.hasError &&
quomodel() { !this.$refs.CustomerSource.hasError &&
if (this.obj) { !this.$refs.CustomerName.hasError &&
this.model = model; !this.$refs.JoinNum.hasError &&
//处理修改传参逻辑 this.chosenCourses.length > 0
} else { ) {
this.model = { this.model.EffectiveStart = date.formatDate(Date.now(), "YYYY/MM/DD");
Id: 0, if (this.model.Name == "") {
Name: "", this.model.Name = `${this.model.CustomerName}${date.formatDate(
EffectiveStart: "",
EffectiveEnd: "",
CustomerType: null,
CustomerSource: null,
TotalOriginalPrice: 0.0,
TotalPrice: 0.0,
TotalDiscountPrice: 0.0,
CustomerInfo: "",
CustomerName: "",
CustomerTel: "",
OfferDetails: [],
JoinNum: 0
};
}
}
},
mounted() {
this.getCategorytree();
},
methods: {
saveOffice() {
this.$refs.EffectiveEnd.validate();
this.$refs.CustomerType.validate();
this.$refs.CustomerSource.validate();
this.$refs.CustomerName.validate();
this.$refs.JoinNum.validate();
if (
!this.$refs.EffectiveEnd.hasError &&
!this.$refs.CustomerType.hasError &&
!this.$refs.CustomerSource.hasError &&
!this.$refs.CustomerName.hasError &&
!this.$refs.JoinNum.hasError &&
this.chosenCourses.length > 0
) {
this.model.EffectiveStart = date.formatDate(Date.now(), "YYYY/MM/DD");
if (this.model.Name == "") {
this.model.Name = `${this.model.CustomerName}${date.formatDate(
Date.now(), Date.now(),
"YYYYMMDDHHmmss" "YYYYMMDDHHmmss"
)}报价单`; )}报价单`;
} }
this.model.OfferDetails = this.chosenCourses; this.model.OfferDetails = this.chosenCourses;
saveCourseOffer(this.model).then(r => { saveCourseOffer(this.model).then(r => {
this.$q.notify({ this.$q.notify({
icon: "iconfont icon-chenggong", icon: "iconfont icon-chenggong",
color: "positive", color: "positive",
timeout: 2000, timeout: 2000,
message: "报价单保存成功", message: "报价单保存成功",
position: "top", position: "top",
actions: [ actions: [{
{
label: "点击查看", label: "点击查看",
color: "primary", color: "primary",
handler: () => { handler: () => {
this.$router.push({ this.$router.push({
path: "/sale/createQuotation" path: "/sale/quotation",
query: {
Id: r.Data
}
}); });
} }
} }]
] });
this.$emit("save");
}); });
this.$emit("save"); }
},
getCategorytree() {
this.TreeCategoryList = [];
var qMsg = {};
queryCourseCategoryTree(qMsg).then(res => {
this.TreeCategoryList = res.Data;
this.categoryOptions = this.TreeCategoryList;
this.getCourses();
}); });
} },
}, getCourses() {
getCategorytree() { this.courses = [];
this.TreeCategoryList = []; var qMsg = {
var qMsg = {}; CourseName: "",
queryCourseCategoryTree(qMsg).then(res => { CateId: 0,
this.TreeCategoryList = res.Data; IsQPrice: 1
this.categoryOptions = this.TreeCategoryList; };
this.getCourses(); queryCourseDropdownList(qMsg).then(res => {
}); this.courses = res.Data;
}, this.courseOptions = this.courses;
getCourses() { });
this.courses = []; },
var qMsg = { filterFn(val, update, abort) {
CourseName: "", update(() => {
CateId: 0, this.categoryOptions = this.TreeCategoryList.filter(
IsQPrice: 1 v => v.CateName.indexOf(val) > -1
}; );
queryCourseDropdownList(qMsg).then(res => { });
this.courses = res.Data; },
this.courseOptions = this.courses; filterCourseFn(val, update, abort) {
}); update(() => {
}, this.courseOptions = this.courses.filter(
filterFn(val, update, abort) { v => v.CourseName.indexOf(val) > -1
update(() => { );
this.categoryOptions = this.TreeCategoryList.filter( });
v => v.CateName.indexOf(val) > -1 },
); changeCategory() {
});
},
filterCourseFn(val, update, abort) {
update(() => {
this.courseOptions = this.courses.filter( this.courseOptions = this.courses.filter(
v => v.CourseName.indexOf(val) > -1 v => v.CateId == this.chosenCategory
); );
}); this.$forceUpdate();
}, },
changeCategory() { addCourse() {
this.courseOptions = this.courses.filter( this.$refs.JoinNum.validate();
v => v.CateId == this.chosenCategory this.$refs.CustomerType.validate();
); if (!this.$refs.JoinNum.hasError && !this.$refs.CustomerType.hasError) {
console.log(this.courseOptions); let val = this.courses.find(x => x.CourseId == this.chosenCourse);
this.$forceUpdate(); if (val) {
}, let temp = this.chosenCourses.find(x => x.CourseId == val.CourseId);
addCourse() { if (!temp) {
this.$refs.JoinNum.validate(); let offer = this.genernalOffer(val);
this.$refs.CustomerType.validate(); if (this.chosenCourses.length > 0) {
if (!this.$refs.JoinNum.hasError && !this.$refs.CustomerType.hasError) { offer.DiscountPrice += 500;
let val = this.courses.find(x => x.CourseId == this.chosenCourse); offer.ActualPrice -= 500;
if (val) { offer.Remark += `^购买多项课程再减500`;
let temp = this.chosenCourses.find(x => x.CourseId == val.CourseId); }
if (!temp) { this.chosenCourses.push(offer);
let offer = this.genernalOffer(val); this.SumMoney();
if (this.chosenCourses.length > 0) {
offer.DiscountPrice += 500;
offer.ActualPrice -= 500;
offer.Remark += `^购买多项课程再减500`;
} }
this.chosenCourses.push(offer);
this.SumMoney();
} }
} }
} },
}, changeDiscountMoney() {
changeDiscountMoney() { this.chosenCourses.forEach((x, i) => {
this.chosenCourses.forEach((x, i) => { x.ActualPrice = x.SourceData.SellPrice * this.model.JoinNum;
x.ActualPrice = x.SourceData.SellPrice * this.model.JoinNum; x.JoinNum = this.model.JoinNum;
x.JoinNum = this.model.JoinNum; this.formatDiscount(x.SourceData, x);
this.formatDiscount(x.SourceData, x); if (i > 0) {
if (i > 0) { x.DiscountPrice += 500;
x.DiscountPrice += 500; x.ActualPrice -= 500;
x.ActualPrice -= 500; x.Remark += `^购买多项课程再减500`;
x.Remark += `^购买多项课程再减500`; }
});
this.SumMoney();
},
SumMoney() {
let dis = 0.0,
total = 0.0;
this.chosenCourses.forEach(x => {
dis += parseFloat(x.DiscountPrice);
total += parseFloat(x.ActualPrice);
});
this.model.TotalDiscountPrice = dis;
this.model.TotalPrice = total;
this.model.TotalOriginalPrice = dis + total;
},
genernalOffer(val) {
let offer = {
DetailsId: 0,
OfferId: 0,
CourseId: val.CourseId,
CourseName: val.CourseName,
OriginalPrice: val.SellPrice,
DiscountPrice: 0,
ActualPrice: val.SellPrice * this.model.JoinNum,
ClassHours: val.ClassHours,
Remark: "",
JoinNum: this.model.JoinNum
};
offer.SourceData = val;
this.formatDiscount(val, offer);
return offer;
},
formatDiscount(val, target) {
let result = {};
if (this.model.JoinNum < 1) {
target.DiscountPrice = 0;
target.Remark = "未填写报名人数";
return;
} }
}); if (this.model.CustomerType == 1) {
this.SumMoney(); //1、判断是否满足双人报名
}, result = this.calcDiscount(3, val);
SumMoney() {
let dis = 0.0,
total = 0.0;
this.chosenCourses.forEach(x => {
dis += parseFloat(x.DiscountPrice);
total += parseFloat(x.ActualPrice);
});
this.model.TotalDiscountPrice = dis;
this.model.TotalPrice = total;
this.model.TotalOriginalPrice = dis + total;
},
genernalOffer(val) {
let offer = {
DetailsId: 0,
OfferId: 0,
CourseId: val.CourseId,
CourseName: val.CourseName,
OriginalPrice: val.SellPrice,
DiscountPrice: 0,
ActualPrice: val.SellPrice * this.model.JoinNum,
ClassHours: val.ClassHours,
Remark: "",
JoinNum: this.model.JoinNum
};
offer.SourceData = val;
this.formatDiscount(val, offer);
return offer;
},
formatDiscount(val, target) {
let result = {};
if (this.model.JoinNum < 1) {
target.DiscountPrice = 0;
target.Remark = "未填写报名人数";
return;
}
if (this.model.CustomerType == 1) {
//1、判断是否满足双人报名
result = this.calcDiscount(3, val);
if (result.money > 0) {
target.DiscountPrice = result.money;
target.ActualPrice = target.ActualPrice - result.money;
target.Remark = result.remark;
} else {
result = this.calcDiscount(2, val);
if (result.money > 0) { if (result.money > 0) {
target.DiscountPrice = result.money; target.DiscountPrice = result.money;
target.ActualPrice = target.ActualPrice - result.money; target.ActualPrice = target.ActualPrice - result.money;
target.Remark = result.remark; target.Remark = result.remark;
} else { } else {
result = this.calcDiscount(1, val); result = this.calcDiscount(2, val);
if (result.money > 0) { if (result.money > 0) {
target.DiscountPrice = result.money; target.DiscountPrice = result.money;
target.ActualPrice = target.ActualPrice - result.money; target.ActualPrice = target.ActualPrice - result.money;
target.Remark = result.remark; target.Remark = result.remark;
} else {
result = this.calcDiscount(1, val);
if (result.money > 0) {
target.DiscountPrice = result.money;
target.ActualPrice = target.ActualPrice - result.money;
target.Remark = result.remark;
}
} }
} }
} else if (this.model.CustomerType == 2) {
result = this.calcDiscount(4, val);
if (result.money > 0) {
target.DiscountPrice = result.money;
target.ActualPrice = target.ActualPrice - result.money;
target.Remark = result.remark;
}
} else {
target.DiscountPrice = 0;
target.Remark = "未选择客户类型";
} }
} else if (this.model.CustomerType == 2) { },
result = this.calcDiscount(4, val); calcDiscount(type, val) {
if (result.money > 0) { let result = {
target.DiscountPrice = result.money; money: 0,
target.ActualPrice = target.ActualPrice - result.money; remark: ""
target.Remark = result.remark; };
} val.PreferentialList.forEach(x => {
} else { if (
target.DiscountPrice = 0; x.PriceDiscountType == type &&
target.Remark = "未选择客户类型"; this.model.JoinNum > 1 &&
} type == 3
}, ) {
calcDiscount(type, val) { result.money =
let result = { parseFloat(val.SellPrice) *
money: 0, (parseFloat(x.PriceMoney) / 100.0) *
remark: "" this.model.JoinNum;
}; result.remark = `双人报名优惠${x.PriceMoney}%`;
val.PreferentialList.forEach(x => { } else if (
if ( x.PriceDiscountType == type &&
x.PriceDiscountType == type && type == 2 &&
this.model.JoinNum > 1 && this.model.JoinNum > 0
type == 3 ) {
) { result.money =
result.money = parseFloat(val.SellPrice) *
parseFloat(val.SellPrice) * (parseFloat(x.PriceMoney) / 100.0) *
(parseFloat(x.PriceMoney) / 100.0) * this.model.JoinNum;
this.model.JoinNum; result.remark = `单人报名优惠${x.PriceMoney}%`;
result.remark = `双人报名优惠${x.PriceMoney}%`; } else if (
} else if ( x.PriceDiscountType == type &&
x.PriceDiscountType == type && type == 1 &&
type == 2 && this.model.JoinNum > 0
this.model.JoinNum > 0 ) {
) { let joinNum =
result.money = Math.floor(this.model.JoinNum / (x.BuyNum + x.SendNum)) * x.BuyNum +
parseFloat(val.SellPrice) * (this.model.JoinNum % (x.BuyNum + x.SendNum));
(parseFloat(x.PriceMoney) / 100.0) * result.money =
this.model.JoinNum; val.SellPrice * this.model.JoinNum -
result.remark = `单人报名优惠${x.PriceMoney}%`; parseFloat(val.SellPrice) * joinNum;
} else if ( result.remark = `买${x.BuyNum}送${x.SendNum}`;
x.PriceDiscountType == type && } else if (
type == 1 && x.PriceDiscountType == type &&
this.model.JoinNum > 0 type == 4 &&
) { this.model.JoinNum > 0
let joinNum = ) {
Math.floor(this.model.JoinNum / (x.BuyNum + x.SendNum)) * x.BuyNum + result.money =
(this.model.JoinNum % (x.BuyNum + x.SendNum)); parseFloat(val.SellPrice) *
result.money = (parseFloat(x.PriceMoney) / 100.0) *
val.SellPrice * this.model.JoinNum - this.model.JoinNum;
parseFloat(val.SellPrice) * joinNum; result.remark = `续费优惠${x.PriceMoney}%`;
console.log("只需支付", joinNum); }
result.remark = `买${x.BuyNum}送${x.SendNum}`; });
} else if ( return result;
x.PriceDiscountType == type && },
type == 4 &&
this.model.JoinNum > 0
) {
result.money =
parseFloat(val.SellPrice) *
(parseFloat(x.PriceMoney) / 100.0) *
this.model.JoinNum;
result.remark = `续费优惠${x.PriceMoney}%`;
}
});
console.log(result, type);
return result;
} }
} };
};
</script> </script>
<style></style> <style></style>
src/pages/sale/courseList.vue
View file @ 9488d898
...@@ -324,12 +324,6 @@ export default { ...@@ -324,12 +324,6 @@ export default {
field: "CoverImg", field: "CoverImg",
align: "left" align: "left"
}, },
// {
// name: 'CourseId',
// label: '课程编号',
// field: 'CourseId',
// align: 'left'
// },
{ {
name: "CourseName", name: "CourseName",
required: true, required: true,
...@@ -424,11 +418,7 @@ export default { ...@@ -424,11 +418,7 @@ export default {
}, },
methods: { methods: {
createQuotation(){ createQuotation(){
this.showForm=true this.showForm=true;
// this.$router.push({
// path: '/sale/createQuotation'
// })
}, },
showContentDialog(content){ showContentDialog(content){
this.showContent=content; this.showContent=content;
...@@ -456,11 +446,9 @@ export default { ...@@ -456,11 +446,9 @@ export default {
new RegExp("\n", "gm"), new RegExp("\n", "gm"),
"<br/>" "<br/>"
); );
console.log(x.CourseFeature);
}); });
this.data = res.Data.PageData; this.data = res.Data.PageData;
this.pageCount = res.Data.PageCount; this.pageCount = res.Data.PageCount;
console.log(this.data, "data");
}) })
.catch(() => { .catch(() => {
this.loading = false; this.loading = false;
......
src/pages/sale/courseList copy.vue → src/pages/sale/courseoffer.vue
View file @ 9488d898
...@@ -109,13 +109,14 @@ ...@@ -109,13 +109,14 @@
line-height: 25px; line-height: 25px;
background-color: #004d40; background-color: #004d40;
} }
</style> </style>
<template> <template>
<div class="page-body courseList"> <div class="page-body courseList">
<div class="page-search row items-center"> <div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md"> <div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3"> <div class="col-3">
<q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.CourseName" label="课程名称" <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Name" label="报价单名称"
@clear="resetSearch" maxlength="20" /> @clear="resetSearch" maxlength="20" />
</div> </div>
</div> </div>
...@@ -125,129 +126,66 @@ ...@@ -125,129 +126,66 @@
<li v-for="(item,index) in data" :key="index"> <li v-for="(item,index) in data" :key="index">
<div class="dline"> <div class="dline">
<div class="d1" style="width:25%"> <div class="d1" style="width:25%">
<div class="di-title">课程名称</div> <div class="di-title">流水号</div>
<div class="di-c" style="margin-top: 25px;"> <div class="di-c" style="margin-top: 25px;">
<div> <div>{{item.SerialNum}}
<img :src="item.CoverImg" v-if="item.CoverImg" style="width:60px;height:60px;margin-right:10px;" />
<img style="width:60px;height:60px;margin-right:10px;" v-else src="../../assets/images/default.png"/>
</div> </div>
<div>{{item.CourseName}}</div>
</div> </div>
</div> </div>
<div class="d2"> <div class="d2">
<div class="di-title">讲师</div> <div class="di-title">名称</div>
<div class="di-c" style="margin-top: 25px;"> <div class="di-c" style="margin-top: 25px;">
<div style="display:flex;align-items:center;" v-for="(subItem,sIndex) in item.TeacherList" <div style="margin-left:5px;">{{item.Name}}</div>
:key="sIndex">
<div>
<img v-if="subItem.TeacherIcon" style="width:25px;height:25px;border-radius:50%;"
:src="subItem.TeacherIcon" />
<div v-else class="myCourseNName">{{subItem.TeacherName.substring(0,1)}}</div>
</div>
<div style="margin-left:5px;">{{subItem.TeacherName}}</div>
</div>
</div> </div>
</div> </div>
<div class="d3"> <div class="d3">
<div class="di-title">销售平台</div> <div class="di-title">客户信息</div>
<div class="di-c" style="margin-top: 25px;"> <div class="di-c" style="margin-top: 25px;">
<span style="margin-right:5px;" v-for="(pItem,pIndex) in item.SalePlatArr">{{pItem}}</span> <span style="margin-right:5px;">{{item.CustomerName}} / {{item.CustomerTel}}</span>
</div> </div>
</div> </div>
<div class="d4" style="width:20%"> <div class="d4" style="width:20%">
<div class="di-title">基础价格</div> <div class="di-title">总原价</div>
<div class="di-c" style="margin-top: 25px;"> <div class="di-c" style="margin-top: 25px;">
<span <span
style="color: var(--q-color-negative); font-weight: bold;">￥{{item.OriginalPrice.toFixed(2)}}</span> style="color: var(--q-color-negative); font-weight: bold;">￥{{item.TotalOriginalPrice.toFixed(2)}}</span>
</div>
</div>
<div class="d5" style="width:20%">
<div class="di-title">总价格</div>
<div class="di-c" style="margin-top: 25px;">
<span style="color: var(--q-color-negative); font-weight: bold;">￥{{item.TotalPrice.toFixed(2)}}</span>
</div>
</div>
<div class="d5" style="width:20%">
<div class="di-title">总优惠</div>
<div class="di-c" style="margin-top: 25px;">
<span
style="color: var(--q-color-negative); font-weight: bold;">￥{{item.TotalDiscountPrice.toFixed(2)}}</span>
</div> </div>
</div> </div>
<div class="d5" style="width:19%"> <div class="d5" style="width:19%">
<div class="di-title">优惠价格</div> <div class="di-title">报名人数</div>
<div class="di-c" style="margin-top: 25px;"> <div class="di-c" style="margin-top: 25px;">
<template v-if="item.PreferentialList&&item.PreferentialList.length>0"> <span style="color: var(--q-color-negative); font-weight: bold;">{{item.JoinNum}}</span>
<table> </div>
<tbody v-for="(pitem,pindex) in item.PreferentialList" v-if="pindex==0"> </div>
<tr> <div class="d5" style="width:19%">
<td> <div class="di-title">状态</div>
<template v-if="pitem.PriceDiscountType==1"> <div class="di-c" style="margin-top: 25px;">
买 <span style="color: var(--q-color-negative); font-weight: bold;">{{pitem.BuyNum}}</span> 送 <span>{{item.CustomerStatusName}}</span>
<span style="color: var(--q-color-negative); font-weight: bold;">{{pitem.SendNum}}</span> </div>
</template> </div>
<template v-else-if="pitem.PriceDiscountType==5"> <div class="d5" style="width:19%">
刷卡分期 <div class="di-title">操作</div>
</template> <div class="di-c" style="margin-top: 25px;">
<template v-else> <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="修改报价单"
{{pitem.PriceDiscountTypeStr}} <span @click="editQuotation(item)" />
style="color: var(--q-color-negative); font-weight: bold;"> {{pitem.PriceMoney}} %</span>
</template> <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="详情"
</td> @click="gotoDetails(item)" />
</tr>
<tr>
<td>
同行返佣<span
style="color: var(--q-color-negative); font-weight: bold;"> {{pitem.B2BCommissionMoney}}
%</span>
</td>
</tr>
<tr>
<td>
销售返佣<span
style="color: var(--q-color-negative); font-weight: bold;"> {{pitem.SaleCommissionMoney}}
%</span>
<span class="iconfont icon-xiangxia" style="color: #2961FE;font-size: 10px"
v-if="item.PreferentialList.length>1">
<q-popup-proxy>
<q-banner>
<table style="width:400px;" border="0" cellspacing="0" cellpadding="0">
<thead style="background-color:rgba(221, 222, 224, 0.2);">
<tr>
<td style="width:45%;height:30px;">
优惠条件
</td>
<td style="width:25%;height:30px;">
同行返佣
</td>
<td style="width:25%;height:30px;">
销售返佣
</td>
</tr>
</thead>
<tbody>
<tr v-for="(pitem,pindex) in item.PreferentialList">
<td style="height:30px;">
<template v-if="pitem.PriceDiscountType==1">
买 {{pitem.BuyNum}} 送 {{pitem.SendNum}}
</template>
<template v-else-if="pitem.PriceDiscountType==5">
刷卡分期
</template>
<template v-else>
{{pitem.PriceDiscountTypeStr}} {{pitem.PriceMoney}} %
</template>
</td>
<td style="height:30px;">
{{pitem.B2BCommissionMoney}} %
</td>
<td style="height:30px;">
{{pitem.SaleCommissionMoney}} %
</td>
</tr>
</tbody>
</table>
</q-banner>
</q-popup-proxy>
</span>
</td>
</tr>
</tbody>
</table>
</template>
</div> </div>
</div> </div>
</div>
<div class="d6 row">
<p style="color:var(--q-color-negative);font-weight: bold"><span
style="color:#2D2D2D;">课程特色：</span>{{item.CourseFeature}}</p>
</div> </div>
</li> </li>
<li style="border: none;display: flex;justify-content: flex-end;background: white;padding: 5px 20px"> <li style="border: none;display: flex;justify-content: flex-end;background: white;padding: 5px 20px">
...@@ -258,18 +196,22 @@ ...@@ -258,18 +196,22 @@
</ul> </ul>
<div v-else style="width: 100%;color: #999999;text-align: center;font-size: 15px">暂无数据</div> <div v-else style="width: 100%;color: #999999;text-align: center;font-size: 15px">暂无数据</div>
</div> </div>
<q-dialog v-model="showForm" persistent>
<quotation-form :obj="offerObj" @save="showForm=false"></quotation-form>
</q-dialog>
</div> </div>
</template> </template>
<script> <script>
import quotationForm from '../../components/sale/quotation-form'
import { import {
queryCoursePage, queryCourseOfferPage,
} from '../../api/course/index' } from '../../api/course/index'
export default { export default {
meta: { meta: {
title: "课程预览" title: "报价单"
}, },
components: { components: {
quotationForm
}, },
data() { data() {
return { return {
...@@ -280,38 +222,49 @@ ...@@ -280,38 +222,49 @@
pageIndex: 1, pageIndex: 1,
pageSize: 12, pageSize: 12,
rowsPerPage: 12, rowsPerPage: 12,
CourseName: "", Name: "",
QCateIds: "", IsGetDetails: 1,
Status: "0",
IsQPrice: 1, //是否查询优惠价格设置
IsQTeacher: 1, //是否查询课程讲师
}, },
pageCount: 0, pageCount: 0,
showForm: false, //是否显示报价单弹窗
offerObj: {}, //报价单信息
} }
}, },
mounted() { mounted() {
this.currentUrl = this.$route.path this.currentUrl = this.$route.path
this.getcourselist(); this.getcourseofferpage();
}, },
methods: { methods: {
gotoDetails(item) {
this.$router.push({
path: "/sale/quotation",
query: {
Id: item.Id
}
});
},
//显示报价单
editQuotation(item) {
this.showForm = true;
this.offerObj = item;
},
//重新查询 //重新查询
resetSearch() { resetSearch() {
this.msg.pageIndex = 1; this.msg.pageIndex = 1;
this.getcourselist(); this.getcourseofferpage();
}, },
//翻页 //翻页
changePage(val) { changePage(val) {
this.msg.pageIndex = val; this.msg.pageIndex = val;
this.getcourselist() this.getcourseofferpage()
}, },
//获取菜单分页列表 //获取报价单分页列表
getcourselist() { getcourseofferpage() {
this.loading = true; this.loading = true;
queryCoursePage(this.msg).then(res => { queryCourseOfferPage(this.msg).then(res => {
this.loading = false this.loading = false
this.data = res.Data.PageData this.data = res.Data.PageData;
this.pageCount = res.Data.PageCount; this.pageCount = res.Data.PageCount;
console.log(this.data, 'data');
}).catch(() => { }).catch(() => {
this.loading = false this.loading = false
}) })
......
src/pages/sale/quotation.vue
View file @ 9488d898
<template> <template>
<div style="max-width:1290px;margin:0 auto;padding:30px;"> <div style="max-width:1290px;margin:0 auto;padding:30px;">
<q-card <q-card style="padding-top: 6.75rem!important;background:rgb(255,255,255)" ref="quotationbox" id="quotationbox"
style="padding-top: 6.75rem!important;background:rgb(255,255,255)" class="shadow-24" v-if="!isPrint">
ref="quotationbox"
id="quotationbox"
class="shadow-24"
v-if="!isPrint"
>
<div class="row justify-center"> <div class="row justify-center">
<div class="col-9"> <div class="col-9">
<div class="flex items-start" style="padding-bottom:5rem;"> <div class="flex items-start" style="padding-bottom:5rem;">
<div class="text-h3 text-weight-bold col"> <div class="text-h3 text-weight-bold col">
<span>报价单</span> <span>报价单</span>
<div style="font-size:13px;font-weight:400;" class="text-muted"> <div style="font-size:13px;font-weight:400;" class="text-muted">
No:20210213001 No:{{model.SerialNum}}
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<div class="text-right" style="margin-bottom:0px;"> <div class="text-right" style="margin-bottom:0px;">
<img src="../../assets/images/quo_logo.png" height="30px" /> <img src="../../assets/images/quo_logo.png" height="30px" />
<img <img src="../../assets/images/quo_logo_text.png" class="q-ml-xs" height="30px" />
src="../../assets/images/quo_logo_text.png"
class="q-ml-xs"
height="30px"
/>
</div> </div>
<div class="text-muted " style="font-size: 1.05rem!important;"> <div class="text-muted " style="font-size: 1.05rem!important;">
成都市锦江区青和里南段55号阳光新业中心2号楼23楼 成都市锦江区青和里南段55号阳光新业中心2号楼23楼
</div> </div>
<div <div class="text-muted text-right" style="font-size: 1.05rem!important;">
class="text-muted text-right"
style="font-size: 1.05rem!important;"
>
联系热线：028-61993633 联系热线：028-61993633
</div> </div>
</div> </div>
</div> </div>
<div style="margin-bottom: 7.5rem!important;"> <div style="margin-bottom: 7.5rem!important;">
<q-img <q-img src="../../assets/images/quo/banner1.jpg" spinner-color="white"
src="../../assets/images/quo/banner1.jpg" style="height: 243px;width:100%;border-radius: 10px;" class="rounded-borders">
spinner-color="white"
style="height: 243px;width:100%;border-radius: 10px;"
class="rounded-borders"
>
</q-img> </q-img>
</div> </div>
<div class="row" :style="{'margin-bottom':isGengernal?'6rem':'20px'}"> <div class="row" :style="{'margin-bottom':isGengernal?'6rem':'20px'}">
...@@ -59,139 +43,75 @@ ...@@ -59,139 +43,75 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr v-for="item in model.OfferDetails">
<td style="text-align:left">
<q-icon
:color="icons[0]"
name="iconfont icon-yuanquan"
class="q-mr-xs"
size="14px"
></q-icon>
<span>商用日语导游基础班(无日语基础)</span>
</td>
<td>81课时</td>
<td>3800.00</td>
<td>3800.00</td>
<td>1</td>
<td class="remark-font">暂无</td>
</tr>
<tr>
<td style="text-align:left"> <td style="text-align:left">
<q-icon <q-icon :color="icons[0]" name="iconfont icon-yuanquan" class="q-mr-xs" size="14px"></q-icon>
:color="icons[1]" <span>{{item.CourseName}}</span>
name="iconfont icon-yuanquan"
class="q-mr-xs"
size="14px"
></q-icon>
<span>商用日语导游基础班(无日语基础)</span>
</td> </td>
<td>81课时</td> <td>{{item.ClassHours}} 课时</td>
<td>3800.00</td> <td>{{item.OriginalPrice}}</td>
<td>3800.00</td> <td>{{item.DiscountPrice}}</td>
<td>2</td> <td>{{item.JoinNum}}</td>
<td class="remark-font"> <td class="remark-font">{{item.Remark}}</td>
<!-- <td class="remark-font">
<div>双人报名享70折优惠</div> <div>双人报名享70折优惠</div>
</td> </td> -->
</tr>
<tr>
<td style="text-align:left">
<q-icon
:color="icons[2]"
name="iconfont icon-yuanquan"
class="q-mr-xs"
size="14px"
></q-icon>
<span>商用日语导游基础班(无日语基础)</span>
</td>
<td>81课时</td>
<td>3800.00</td>
<td>3800.00</td>
<td>3</td>
<td class="remark-font">暂无</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<q-separator <q-separator color="blue-grey-1" style="margin:20px auto;"></q-separator>
color="blue-grey-1"
style="margin:20px auto;"
></q-separator>
<div class="quo-font text-weight-bold">销售经理</div> <div class="quo-font text-weight-bold">销售经理</div>
<div class="row"> <div class="row">
<div class="col-3 quo-font f14">姓名：</div> <div class="col-3 quo-font f14">姓名：</div>
<div class="col-3 quo-font f14 text-right">罗超</div> <div class="col-3 quo-font f14 text-right">{{model.CreateByName}}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-3 quo-font f14">联系电话：</div> <div class="col-3 quo-font f14">联系电话：</div>
<div class="col-3 quo-font f14 text-right">17308037817</div> <div class="col-3 quo-font f14 text-right">{{model.CreateTel}}</div>
</div> </div>
<div class="row q-pb-xl"> <div class="row q-pb-xl">
<div class="col-3 quo-font f14">微信：</div> <div class="col-3 quo-font f14">微信：</div>
<div class="col-3 quo-font f14 text-right">17308037817</div> <div class="col-3 quo-font f14 text-right">{{model.CreateWeChatNo}}</div>
</div> </div>
</div> </div>
<div <div class="col text-right"
class="col text-right" style="border-left:1px solid #ebedf3;padding-left: 2.5rem;padding-bottom: 2.5rem;padding-top: 2.5rem;margin-left:2.5rem">
style="border-left:1px solid #ebedf3;padding-left: 2.5rem;padding-bottom: 2.5rem;padding-top: 2.5rem;margin-left:2.5rem"
>
<div style="color:#b5b5c3!important;font-size:17px;" class=""> <div style="color:#b5b5c3!important;font-size:17px;" class="">
合计金额 合计金额
</div> </div>
<div <div style="font-family:Poppins,Helvetica,sans-serif;font-size:26px;" class="text-weight-bold">
style="font-family:Poppins,Helvetica,sans-serif;font-size:26px;" ￥{{model.TotalPrice}}
class="text-weight-bold"
>
￥20,600.00
</div> </div>
<div <div class="remark-font"
class="remark-font" style="padding-bottom: 3rem;margin-bottom: 4rem;border-bottom:1px solid #ebedf3;">
style="padding-bottom: 3rem;margin-bottom: 4rem;border-bottom:1px solid #ebedf3;"
>
含税报价 含税报价
</div> </div>
<div <div style="color:#b5b5c3!important;font-size:14px;" class="text-weight-bold q-mb-md">
style="color:#b5b5c3!important;font-size:14px;"
class="text-weight-bold q-mb-md"
>
客户信息 客户信息
</div> </div>
<div style="font-size:14px;" class="text-weight-bold">张桂花</div> <div style="font-size:14px;" class="text-weight-bold">{{model.CustomerName}}</div>
<div style="font-size:14px;" class="text-weight-bold q-mb-lg"> <div style="font-size:14px;" class="text-weight-bold q-mb-lg">
13551126755 {{model.CustomerTel}}
</div> </div>
<div <div style="color:#b5b5c3!important;font-size:14px;" class="text-weight-bold q-mb-md">
style="color:#b5b5c3!important;font-size:14px;"
class="text-weight-bold q-mb-md"
>
报价单号 报价单号
</div> </div>
<div style="font-size:14px;" class="text-weight-bold q-mb-lg"> <div style="font-size:14px;" class="text-weight-bold q-mb-lg">
No:20210213001 No:{{model.SerialNum}}
</div> </div>
<div <div style="color:#b5b5c3!important;font-size:14px;" class="text-weight-bold q-mb-md">
style="color:#b5b5c3!important;font-size:14px;"
class="text-weight-bold q-mb-md"
>
报价时间 报价时间
</div> </div>
<div style="font-size:14px;" class="text-weight-bold"> <div style="font-size:14px;" class="text-weight-bold">
2021年02月29日 {{model.CreateTime}}
</div> </div>
</div> </div>
</div> </div>
<div v-if="!isGengernal"> <div v-if="!isGengernal">
<q-separator <q-separator color="blue-grey-1" style="margin-bottom:20px;"></q-separator>
color="blue-grey-1"
style="margin-bottom:20px;"
></q-separator>
<div style="padding:6rem 0;" class="row"> <div style="padding:6rem 0;" class="row">
<div class="col"> <div class="col">
<q-btn <q-btn color="primary" label="下载报价单" class="q-mr-md" @click="saveImage" :loading="isGengernal"></q-btn>
color="primary"
label="下载报价单"
class="q-mr-md"
@click="saveImage"
:loading="isGengernal"
></q-btn>
<q-btn color="primary" flat label="获取二维码"></q-btn> <q-btn color="primary" flat label="获取二维码"></q-btn>
</div> </div>
<div class="col-auto"> <div class="col-auto">
...@@ -209,113 +129,146 @@ ...@@ -209,113 +129,146 @@
</template> </template>
<script> <script>
import print from "print-js"; import {
import html2canvas from "html2canvas"; queryCourseOfferInfo,
export default { } from '../../api/course/index'
data() { import print from "print-js";
return { import html2canvas from "html2canvas";
icons: [ export default {
"negative", data() {
"primary", return {
"warning", icons: [
"secondary", "negative",
"accent", "primary",
"negative", "warning",
"primary", "secondary",
"warning", "accent",
"secondary", "negative",
"accent" "primary",
], "warning",
img: "", "secondary",
isPrint: false, "accent"
isGengernal: false ],
}; img: "",
}, isPrint: false,
methods: { isGengernal: false,
print() { Id: 0, //报价单编号
printJS({ model: {}, //报价单详情
printable: "quotationBoxId", // 标签元素id };
type: "html"
});
setTimeout(() => {
this.isPrint = false;
this.isGengernal = false;
}, 1000);
}, },
dataURLToBlob(dataurl) { created() {
let arr = dataurl.split(","); if (this.$route.query.Id) {
let mime = arr[0].match(/:(.*?);/)[1]; this.Id = this.$route.query.Id;
let bstr = atob(arr[1]); this.getDetails();
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
} }
return new Blob([u8arr], { type: mime });
}, },
saveImage() { methods: {
if (!this.isGengernal) { //获取报价单详情
this.isGengernal = true; getDetails() {
queryCourseOfferInfo({
Id: this.Id
}).then(res => {
if (res.Code == 1) {
this.model = res.Data;
}
});
},
print() {
printJS({
printable: "quotationBoxId", // 标签元素id
type: "html"
});
setTimeout(() => { setTimeout(() => {
let canvasID = document.getElementById("quotationbox"); this.isPrint = false;
let a = document.createElement("a"); this.isGengernal = false;
html2canvas(canvasID, {
useCORS: true,
allowTaint: true,
backgroundColor: "#FFFFFF",
scale: 1.3,
taintTest: false
}).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = "none";
a.style.display = "none";
document.body.removeChild(dom);
let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
a.setAttribute("href", URL.createObjectURL(blob));
a.setAttribute("download", "张桂花的报价单.png");
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
this.isGengernal = false;
});
}, 1000); }, 1000);
},
dataURLToBlob(dataurl) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
},
saveImage() {
if (!this.isGengernal) {
this.isGengernal = true;
setTimeout(() => {
let canvasID = document.getElementById("quotationbox");
let a = document.createElement("a");
html2canvas(canvasID, {
useCORS: true,
allowTaint: true,
backgroundColor: "#FFFFFF",
scale: 1.3,
taintTest: false
}).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = "none";
a.style.display = "none";
document.body.removeChild(dom);
let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
a.setAttribute("href", URL.createObjectURL(blob));
var name = "报价单.png";
if (this.model) {
name = this.model.Name + "报价单.png";
}
a.setAttribute("download", name);
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
this.isGengernal = false;
});
}, 1000);
}
} }
} }
} };
};
</script> </script>
<style> <style>
.quo-table { .quo-table {
width: 100%; width: 100%;
} }
.quo-table thead th {
font-size: 13px; .quo-table thead th {
font-weight: bold; font-size: 13px;
color: #b5b5c3 !important; font-weight: bold;
border-bottom: 1px solid rgb(235, 237, 243); color: #b5b5c3 !important;
line-height: 1.5; border-bottom: 1px solid rgb(235, 237, 243);
padding-bottom: 2.25rem !important; line-height: 1.5;
text-align: right; padding-bottom: 2.25rem !important;
} text-align: right;
.quo-table tbody td { }
padding-bottom: 0.75rem;
vertical-align: top; .quo-table tbody td {
padding-top: 1.75rem !important; padding-bottom: 0.75rem;
padding-left: 0; vertical-align: top;
font-size: 13px; padding-top: 1.75rem !important;
font-weight: 600; padding-left: 0;
color: #3f4254; font-size: 13px;
line-height: 1.5; font-weight: 600;
text-align: right; color: #3f4254;
} line-height: 1.5;
.quo-font { text-align: right;
color: #3f4254; }
font-size: 15px;
margin-bottom: 0.75rem !important; .quo-font {
} color: #3f4254;
.quo-font.f14 { font-size: 15px;
font-size: 14px; margin-bottom: 0.75rem !important;
} }
.quo-font.f14 {
font-size: 14px;
}
</style> </style>
src/router/routes.js
View file @ 9488d898
...@@ -426,6 +426,11 @@ const routes = [{ ...@@ -426,6 +426,11 @@ const routes = [{
component: () => component: () =>
import("pages/sale/courseList.vue") import("pages/sale/courseList.vue")
}, },
{
path: "/sale/courseoffer", //销售 报价单
component: () =>
import("pages/sale/courseoffer.vue")
},
{ {
path: "/sale/myOrder", //销售 我的订单 path: "/sale/myOrder", //销售 我的订单
component: () => component: () =>
...@@ -467,7 +472,7 @@ const routes = [{ ...@@ -467,7 +472,7 @@ const routes = [{
import("pages/course/question.vue") import("pages/course/question.vue")
}, },
{ {
path: "/sale/createQuotation", //报价单 path: "/sale/quotation", //报价单
component: () => component: () =>
import("pages/sale/quotation.vue") import("pages/sale/quotation.vue")
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment