Skip to content

C
confucius
Commit 8602e783 authored by 罗超's avatar 罗超
Browse files
Options

提交报价单

parent 3656c41c
Hide whitespace changes
Inline Side-by-side
Showing with 1021 additions and 12 deletions
package.json
View file @ 8602e783
......@@ -18,9 +18,11 @@
"core-js": "^3.6.5",
"cos-js-sdk-v5": "^1.1.5",
"element-ui": "^2.14.1",
"html2canvas": "^1.0.0-rc.7",
"js-md5": "^0.7.3",
"lockr": "^0.8.5",
"mavon-editor": "^2.9.1",
"print-js": "^1.6.0",
"quasar": "^1.0.0",
"relation-graph": "^1.0.8",
"v-viewer": "^1.5.1",
......
quasar.conf.js
View file @ 8602e783
......@@ -48,7 +48,7 @@ module.exports = function (ctx) {
build: {
vueRouterMode: 'hash', // available values: 'hash', 'history'
env: ctx.dev ? {
API: 'http://eduapi.oytour.com/api'
API: 'http://192.168.1.27:8300/api'
} : {
API: 'http://eduapi.oytour.com/api'
},
......
src/App.vue
View file @ 8602e783
......@@ -12,7 +12,7 @@ export default {
<style>
@import url('~assets/css/font.css');
@import url('//at.alicdn.com/t/font_2077629_r9bz8pay7o.css');
@import url('//at.alicdn.com/t/font_2077629_izue8ioqz5e.css');
html,
body,
......@@ -66,7 +66,7 @@ body,
}
.svg-icon.svg-icon-positive g [fill] {
transition: fill .3s ease;
fill:var(--q-color-positive) !important;
fill:'#C9F7F5' !important;
}
.svg-icon.svg-icon-white g [fill] {
transition: fill .3s ease;
......
src/api/course/index.js
View file @ 8602e783
......@@ -270,4 +270,16 @@ export function saveCoursePreferential(data)
method: 'post',
data
})
}
\ No newline at end of file
}
/**
* 新增修改课程优惠
*/
export function saveCourseOffer(data)
{
return request({
url: "/CourseOffer/SetCourseOffer",
method: 'post',
data
})
}
\ No newline at end of file
src/assets/css/table.sass
View file @ 8602e783
......@@ -86,4 +86,28 @@
position: sticky
right: 0
z-index: 1
box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px
\ No newline at end of file
box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px
.sticky-header-table
/* height or max-height is important */
.q-table__top,
.q-table__bottom,
thead tr:first-child th
/* bg color is important for th; just specify one */
background-color: #f5f6f7
thead tr th
position: sticky
z-index: 2 !important
thead tr th:first-child
z-index: 3 !important
thead tr:first-child th
top: 0
/* this is when the loading indicator appears */
&.q-table--loading thead tr:last-child th
/* height of all previous header rows */
top: 48px
.no-bottom-table
.q-table__bottom
display: none !important
\ No newline at end of file
src/components/global/notify.vue
View file @ 8602e783
......@@ -48,7 +48,7 @@
<img :src="imgCov">
</div>
<div class="flex row items-center relative-position">
<q-avatar size="30px" font-size="14px" rounded color="positive" class="q-mr-md" text-color="secondary">
<q-avatar size="30px" font-size="14px" rounded style="background:#C9F7F5" class="q-mr-md" text-color="secondary">
<img :src="showObj.UserIcon" v-if="showObj.UserIcon">
<span v-else>{{showObj.AccountName.substring(0,1)}}</span>
</q-avatar>
......
src/components/global/user-right-box.vue
View file @ 8602e783
......@@ -6,7 +6,7 @@
<span class="remark-font">12条未读消息</span>
</div>
<div class="q-mt-lg flex">
<q-avatar size="100px" font-size="36px" rounded color="positive" text-color="white">
<q-avatar size="100px" font-size="36px" rounded style="background:#C9F7F5" text-color="white">
<img :src="showObj.UserIcon" v-if="showObj.UserIcon">
<span v-else>{{showObj.AccountName.substring(0,1)}}</span>
</q-avatar>
......
src/components/okr/okr-emp-info.vue
View file @ 8602e783
......@@ -6,7 +6,7 @@
size="40px"
font-size="18px"
rounded
color="positive"
style="background:#C9F7F5"
text-color="white"
>
<img :src="user.UserIcon" v-if="user.UserIcon" />
......
src/components/okr/okr-info.vue
View file @ 8602e783
......@@ -6,7 +6,7 @@
size="40px"
font-size="18px"
rounded
color="positive"
style="background:#C9F7F5"
text-color="white"
>
<img :src="user.UserIcon" v-if="user.UserIcon" />
......
src/components/sale/quotation-form.vue 0 → 100644
View file @ 8602e783
<template>
<q-card class="q-px-md" style="width:750px;max-width:800px;">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">创建报价单</div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<q-card-section style="max-height:75vh;" class="scroll">
<q-banner
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">
<span class="q-mr-md">
<inline-svg
class="svg-icon svg-icon-orange"
src="icons/svg/Code/Warning-2.svg"
></inline-svg>
</span>
<span style="font-size:12px;"
>报价单价格系统将进行自动计算，如需额外的优惠请创建报价单后进行申请</span
>
</div>
</q-banner>
<div class="row">
<div class="col q-mr-md">
<q-input
standout
bottom-slots
v-model="model.Name"
ref="Name"
label="报价单名称"
dense
/>
</div>
<div class="col">
<q-select
dense
standout
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 class="row">
<div class="col q-mr-md">
<q-select
dense
standout
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 class="col">
<q-input
standout
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>
<span style="font-size:14px;">人</span>
</template>
</q-input>
</div>
</div>
<div class="row">
<div class="col q-mr-md">
<q-input
standout
bottom-slots
v-model="model.CustomerName"
ref="CustomerName"
label="客户姓名"
dense
:rules="[val => !!val || '请输入客户姓名']"
/>
</div>
<div class="col">
<q-input
standout
bottom-slots
v-model="model.CustomerTel"
label="客户电话"
dense
mask="#"
reverse-fill-mask
/>
</div>
</div>
<div class="text-subtitle2 text-weight-bold q-mb-md">
<span>选择课程</span>
</div>
<div class="row">
<!-- <div class="col-5 q-mr-md">
<q-select
dense
standout
behavior="menu"
v-model="chosenCategory"
:options="categoryOptions"
@filter="filterFn"
input-debounce="0"
use-input
option-label="CateName"
option-value="CateId"
emit-value
map-options
@input="changeCategory"
:placeholder="!chosenCategory?'选择系类':''"
clearable
/>
</div> -->
<div class="col">
<q-select
dense
standout
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 class="q-ml-md">
<q-btn color="primary" label="添加" @click="addCourse"></q-btn>
</div>
</div>
<div class="q-mt-md">
<q-table
:pagination="pageInfo"
no-data-label="暂无相关数据"
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">
<q-td :props="props" class="text-negative">
<div
v-for="(x, i) in props.value.split('^')"
style="border-bottom:1px dotted #f5f6f7;"
>
{{ x }}
</div>
</q-td>
</template>
<template v-slot:bottom>
<div>&nbsp;</div>
</template>
</q-table>
</div>
<div style="border-top:1px solid #f5f6f7;" class="row q-py-md">
<div class="col">
<span>累计优惠：</span>
<span class="q-ml-xs text-weight-bold"
>￥{{
model.TotalPrice ? model.TotalDiscountPrice.toFixed(2) : "0.00"
}}</span
>
</div>
<div class="col text-right">
<span>课程总价：</span>
<span class="q-ml-xs text-weight-bold"
>￥{{
model.TotalPrice ? model.TotalPrice.toFixed(2) : "0.00"
}}</span
>
</div>
</div>
<div class="row">
<div class="col q-mr-md"></div>
<div class="col">
<q-input
standout
bottom-slots
v-model="model.EffectiveEnd"
ref="EffectiveEnd"
label="报价有效期"
dense
mask="date"
class="cursor-pointer"
readonly
:rules="[val => !!val || '请选择有效日期']"
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy>
<q-date
v-model="model.EffectiveEnd"
title=""
subtitle="报价有效日期"
>
<div class="row items-center justify-end">
<q-btn v-close-popup label="确认" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</div>
</q-card-section>
<q-card-actions align="right" class="bg-white">
<q-btn label="取消" flat color="primary" v-close-popup />
<q-btn
label="创建报价单"
color="accent"
class="q-px-md"
style="font-weight:400 !important"
@click="saveOffice"
/>
</q-card-actions>
</q-card>
</template>
<script>
import {
queryCourseDropdownList,
queryCourseCategoryTree,
saveCourseOffer
} from "../../api/course/index";
import { date } from "quasar";
export default {
props: ["obj"],
data() {
return {
CustomerTypes: [
{
id: 1,
name: "新客户"
},
{
id: 2,
name: "续班客户"
}
],
CustomerSources: [
{
id: 1,
name: "学校介绍"
},
{
id: 2,
name: "朋友介绍"
},
{
id: 3,
name: "网络广告"
}
],
model: {},
columns: [
{
name: "CourseName",
required: true,
label: "课程名称",
align: "left",
field: row => row.CourseName
},
// {
// name: "OriginalPrice",
// required: true,
// label: "原价",
// align: "left",
// field: row => row.OriginalPrice
// },
{
name: "OriginalPrice",
required: true,
label: "现价",
align: "left",
field: row => row.OriginalPrice.toFixed(2)
},
{
name: "JoinNum",
required: true,
label: "报名人数",
align: "left",
field: row => row.JoinNum
},
{
name: "DiscountPrice",
required: true,
label: "优惠",
align: "left",
field: row => row.DiscountPrice.toFixed(2)
},
{
name: "DiscountRemark",
required: true,
label: "优惠说明",
align: "left",
field: row => row.Remark
},
{
name: "ActualPrice",
required: true,
label: "小计金额",
align: "left",
field: row => row.ActualPrice.toFixed(2)
}
],
TreeCategoryList: [],
pageInfo: {
pageIndex: 1,
pageSize: 12,
rowsPerPage: 12
},
courses: [],
courseOptions: [],
chosenCategory: null,
chosenCourse: null,
categoryOptions: [],
chosenCourses: []
};
},
computed: {
quomodel() {
if (this.obj) {
this.model = model;
//处理修改传参逻辑
} 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
};
}
}
},
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(),
"YYYYMMDDHHmmss"
)}报价单`;
}
this.model.OfferDetails = this.chosenCourses;
saveCourseOffer(this.model).then(r => {
this.$q.notify({
icon: "iconfont icon-chenggong",
color: "positive",
timeout: 2000,
message: "报价单保存成功",
position: "top",
actions: [
{
label: "点击查看",
color: "primary",
handler: () => {
this.$router.push({
path: "/sale/createQuotation"
});
}
}
]
});
this.$emit("save");
});
}
},
getCategorytree() {
this.TreeCategoryList = [];
var qMsg = {};
queryCourseCategoryTree(qMsg).then(res => {
this.TreeCategoryList = res.Data;
this.categoryOptions = this.TreeCategoryList;
this.getCourses();
});
},
getCourses() {
this.courses = [];
var qMsg = {
CourseName: "",
CateId: 0,
IsQPrice: 1
};
queryCourseDropdownList(qMsg).then(res => {
this.courses = res.Data;
this.courseOptions = this.courses;
});
},
filterFn(val, update, abort) {
update(() => {
this.categoryOptions = this.TreeCategoryList.filter(
v => v.CateName.indexOf(val) > -1
);
});
},
filterCourseFn(val, update, abort) {
update(() => {
this.courseOptions = this.courses.filter(
v => v.CourseName.indexOf(val) > -1
);
});
},
changeCategory() {
this.courseOptions = this.courses.filter(
v => v.CateId == this.chosenCategory
);
console.log(this.courseOptions);
this.$forceUpdate();
},
addCourse() {
this.$refs.JoinNum.validate();
this.$refs.CustomerType.validate();
if (!this.$refs.JoinNum.hasError && !this.$refs.CustomerType.hasError) {
let val = this.courses.find(x => x.CourseId == this.chosenCourse);
if (val) {
let temp = this.chosenCourses.find(x => x.CourseId == val.CourseId);
if (!temp) {
let offer = this.genernalOffer(val);
if (this.chosenCourses.length > 0) {
offer.DiscountPrice += 500;
offer.ActualPrice -= 500;
offer.Remark += `^购买多项课程再减500`;
}
this.chosenCourses.push(offer);
this.SumMoney();
}
}
}
},
changeDiscountMoney() {
this.chosenCourses.forEach((x, i) => {
x.ActualPrice = x.SourceData.SellPrice * this.model.JoinNum;
x.JoinNum = this.model.JoinNum;
this.formatDiscount(x.SourceData, x);
if (i > 0) {
x.DiscountPrice += 500;
x.ActualPrice -= 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) {
//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) {
target.DiscountPrice = result.money;
target.ActualPrice = target.ActualPrice - result.money;
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 = "未选择客户类型";
}
},
calcDiscount(type, val) {
let result = {
money: 0,
remark: ""
};
val.PreferentialList.forEach(x => {
if (
x.PriceDiscountType == type &&
this.model.JoinNum > 1 &&
type == 3
) {
result.money =
parseFloat(val.SellPrice) *
(parseFloat(x.PriceMoney) / 100.0) *
this.model.JoinNum;
result.remark = `双人报名优惠${x.PriceMoney}%`;
} else if (
x.PriceDiscountType == type &&
type == 2 &&
this.model.JoinNum > 0
) {
result.money =
parseFloat(val.SellPrice) *
(parseFloat(x.PriceMoney) / 100.0) *
this.model.JoinNum;
result.remark = `单人报名优惠${x.PriceMoney}%`;
} else if (
x.PriceDiscountType == type &&
type == 1 &&
this.model.JoinNum > 0
) {
let joinNum =
Math.floor(this.model.JoinNum / (x.BuyNum + x.SendNum)) * x.BuyNum +
(this.model.JoinNum % (x.BuyNum + x.SendNum));
result.money =
val.SellPrice * this.model.JoinNum -
parseFloat(val.SellPrice) * joinNum;
console.log("只需支付", joinNum);
result.remark = `买${x.BuyNum}送${x.SendNum}`;
} else if (
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>
<style></style>
src/css/quasar.variables.sass
View file @ 8602e783
......@@ -18,7 +18,7 @@ $accent : #232125
$dark : #1d1d1d
$positive : #C9F7F5
$positive : #21ba45
$negative : #f5576c
$info : #31CCEC
$warning : #F2C037
......
src/layouts/MainLayout.vue
View file @ 8602e783
......@@ -23,7 +23,7 @@
<q-btn flat color="text-black" style="height:50px" @click="showInfo">
<span class="text-grey q-mr-xs">Hi</span>
<span class="text-dark q-mr-md">{{(userInfo&& userInfo.AccountName? userInfo.AccountName:"")}} </span>
<q-avatar size="35px" rounded color="positive" text-color="white">
<q-avatar size="35px" rounded style="background:#C9F7F5" text-color="white">
<img :src="userInfo.UserIcon" v-if="userInfo&&userInfo.UserIcon">
<span v-else>{{(userInfo&& userInfo.AccountName? userInfo.AccountName.substring(0,1):"") }}</span>
</q-avatar>
......
src/pages/sale/courseList.vue
View file @ 8602e783
......@@ -149,6 +149,7 @@ li {
class="q-mr-md"
icon="add"
label="创建报价单"
@click="createQuotation"
/>
</div>
</template>
......@@ -287,15 +288,21 @@ li {
</q-card-section>
</q-card>
</q-dialog>
<q-dialog v-model="showForm" persistent>
<quotation-form :obj="null" @save="showForm=false"></quotation-form>
</q-dialog>
</div>
</template>
<script>
import { queryCoursePage } from "../../api/course/index";
import quotationForm from '../../components/sale/quotation-form'
export default {
meta: {
title: "课程预览"
},
components: {},
components: {
quotationForm
},
data() {
return {
currentUrl: "",
......@@ -303,6 +310,7 @@ export default {
loading: true,
carousel:false,
showContent:'',
showForm:false,
columns: [
{
name: "CourseFeature",
......@@ -415,6 +423,13 @@ export default {
this.getcourselist();
},
methods: {
createQuotation(){
this.showForm=true
// this.$router.push({
// path: '/sale/createQuotation'
// })
},
showContentDialog(content){
this.showContent=content;
this.carousel=true
......
src/pages/sale/quotation.vue 0 → 100644
View file @ 8602e783
<template>
<div style="max-width:1290px;margin:0 auto;padding:30px;">
<q-card
style="padding-top: 6.75rem!important;background:rgb(255,255,255)"
ref="quotationbox"
id="quotationbox"
class="shadow-24"
v-if="!isPrint"
>
<div class="row justify-center">
<div class="col-9">
<div class="flex items-start" style="padding-bottom:5rem;">
<div class="text-h3 text-weight-bold col">
<span>报价单</span>
<div style="font-size:13px;font-weight:400;" class="text-muted">
No:20210213001
</div>
</div>
<div class="col-auto">
<div class="text-right" style="margin-bottom:0px;">
<img src="../../assets/images/quo_logo.png" height="30px" />
<img
src="../../assets/images/quo_logo_text.png"
class="q-ml-xs"
height="30px"
/>
</div>
<div class="text-muted " style="font-size: 1.05rem!important;">
成都市锦江区青和里南段55号阳光新业中心2号楼23楼
</div>
<div
class="text-muted text-right"
style="font-size: 1.05rem!important;"
>
联系热线：028-61993633
</div>
</div>
</div>
<div style="margin-bottom: 7.5rem!important;">
<q-img
src="../../assets/images/quo/banner1.jpg"
spinner-color="white"
style="height: 243px;width:100%;border-radius: 10px;"
class="rounded-borders"
>
</q-img>
</div>
<div class="row" :style="{'margin-bottom':isGengernal?'6rem':'20px'}">
<div class="col-9" style="padding-top: 2.5rem;">
<table class="quo-table">
<thead>
<tr>
<th style="text-align:left;">课程名称</th>
<th>课时</th>
<th>原价</th>
<th>折扣价</th>
<th>人数</th>
<th>优惠内容</th>
</tr>
</thead>
<tbody>
<tr>
<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">
<q-icon
:color="icons[1]"
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>2</td>
<td class="remark-font">
<div>双人报名享70折优惠</div>
</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>
</tbody>
</table>
<q-separator
color="blue-grey-1"
style="margin:20px auto;"
></q-separator>
<div class="quo-font text-weight-bold">销售经理</div>
<div class="row">
<div class="col-3 quo-font f14">姓名：</div>
<div class="col-3 quo-font f14 text-right">罗超</div>
</div>
<div class="row">
<div class="col-3 quo-font f14">联系电话：</div>
<div class="col-3 quo-font f14 text-right">17308037817</div>
</div>
<div class="row q-pb-xl">
<div class="col-3 quo-font f14">微信：</div>
<div class="col-3 quo-font f14 text-right">17308037817</div>
</div>
</div>
<div
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"
>
<div style="color:#b5b5c3!important;font-size:17px;" class="">
合计金额
</div>
<div
style="font-family:Poppins,Helvetica,sans-serif;font-size:26px;"
class="text-weight-bold"
>
￥20,600.00
</div>
<div
class="remark-font"
style="padding-bottom: 3rem;margin-bottom: 4rem;border-bottom:1px solid #ebedf3;"
>
含税报价
</div>
<div
style="color:#b5b5c3!important;font-size:14px;"
class="text-weight-bold q-mb-md"
>
客户信息
</div>
<div style="font-size:14px;" class="text-weight-bold">张桂花</div>
<div style="font-size:14px;" class="text-weight-bold q-mb-lg">
13551126755
</div>
<div
style="color:#b5b5c3!important;font-size:14px;"
class="text-weight-bold q-mb-md"
>
报价单号
</div>
<div style="font-size:14px;" class="text-weight-bold q-mb-lg">
No:20210213001
</div>
<div
style="color:#b5b5c3!important;font-size:14px;"
class="text-weight-bold q-mb-md"
>
报价时间
</div>
<div style="font-size:14px;" class="text-weight-bold">
2021年02月29日
</div>
</div>
</div>
<div v-if="!isGengernal">
<q-separator
color="blue-grey-1"
style="margin-bottom:20px;"
></q-separator>
<div style="padding:6rem 0;" class="row">
<div class="col">
<q-btn
color="primary"
label="下载报价单"
class="q-mr-md"
@click="saveImage"
:loading="isGengernal"
></q-btn>
<q-btn color="primary" flat label="获取二维码"></q-btn>
</div>
<div class="col-auto">
<q-btn color="dark" label="撤销报价单"></q-btn>
</div>
</div>
</div>
</div>
</div>
</q-card>
<div v-if="isPrint" id="quotationBoxId">
<img :src="img" />
</div>
</div>
</template>
<script>
import print from "print-js";
import html2canvas from "html2canvas";
export default {
data() {
return {
icons: [
"negative",
"primary",
"warning",
"secondary",
"accent",
"negative",
"primary",
"warning",
"secondary",
"accent"
],
img: "",
isPrint: false,
isGengernal: false
};
},
methods: {
print() {
printJS({
printable: "quotationBoxId", // 标签元素id
type: "html"
});
setTimeout(() => {
this.isPrint = false;
this.isGengernal = false;
}, 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));
a.setAttribute("download", "张桂花的报价单.png");
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
this.isGengernal = false;
});
}, 1000);
}
}
}
};
</script>
<style>
.quo-table {
width: 100%;
}
.quo-table thead th {
font-size: 13px;
font-weight: bold;
color: #b5b5c3 !important;
border-bottom: 1px solid rgb(235, 237, 243);
line-height: 1.5;
padding-bottom: 2.25rem !important;
text-align: right;
}
.quo-table tbody td {
padding-bottom: 0.75rem;
vertical-align: top;
padding-top: 1.75rem !important;
padding-left: 0;
font-size: 13px;
font-weight: 600;
color: #3f4254;
line-height: 1.5;
text-align: right;
}
.quo-font {
color: #3f4254;
font-size: 15px;
margin-bottom: 0.75rem !important;
}
.quo-font.f14 {
font-size: 14px;
}
</style>
src/router/routes.js
View file @ 8602e783
......@@ -466,6 +466,11 @@ const routes = [{
component: () =>
import("pages/course/question.vue")
},
{
path: "/sale/createQuotation", //报价单
component: () =>
import("pages/sale/quotation.vue")
},
{
path: "/course/courseinfo",
component: () => import("pages/course/courseinfo.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