新增页面

src/components/sale/offertransorder-form.vue

+<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">
+          <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:body-cell-ClassName="props">
+            <span>
+              <template v-if="props.row.ClassName">
+                {{props.row.ClassName}}
+              </template>
+              <template v-else>
+                选择课程
+              </template>
+            </span>&nbsp;
+            <i class="iconfont icon-edit" @click.stop="setClass(props.row)" title="点击修改班级状态">
+              <q-popup-proxy>
+                <q-banner v-if="isShowClass">
+                  <div class="calenderDialog">
+                    <div style="margin:10px 0 15px 0;">设置班级状态</div>
+                    <q-select standout="bg-primary text-white" option-value="Id" option-label="Name"
+                      v-model="statusMsg.ClassStatus" :options="classStatusList" emit-value map-options label="班级状态" />
+                    <q-card-actions align="right" class="bg-white">
+                      <q-btn label="取消" flat color="grey-10" @click="isShowClass=false"
+                        style="font-weight:400 !important" />
+                      <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
+                        @click="setClassStatus()" />
+                    </q-card-actions>
+                  </div>
+                </q-banner>
+              </q-popup-proxy>
+            </i>
+          </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="model.Id==0?'创建报价单':'保存报价单'" color="accent" class="q-px-md" style="font-weight:400 !important"
+        @click="saveOffice" />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script>
+  import {
+    queryCourseDropdownList,
+    queryCourseCategoryTree,
+    saveCourseOffer,
+    queryCourseOfferInfo
+  } 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.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
+        },
+        courseList: [], //课程列表
+        courseOptions: [],
+        chosenCategory: null, //选中的系列
+        chosenCourse: null, //选中的课程
+        categoryOptions: [],
+        chosenCourses: [],
+        isShowClass:false,//选择班级
+      };
+    },
+    computed: {
+
+    },
+    created() {
+      this.getCategorytree();
+    },
+    mounted() {
+      this.initObj();
+    },
+    methods: {
+      //选择班级
+      setClass(item) {
+
+      },
+      //初始化对象
+      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;
+                this.chosenCourses = 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
+          };
+        }
+      },
+      //保存报价单
+      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/quotation",
+                    query: {
+                      Id: r.Data
+                    }
+                  });
+                }
+              }]
+            });
+            this.$emit("save");
+          });
+        }
+      },
+      //获取课程系列
+      getCategorytree() {
+        this.TreeCategoryList = [];
+        var qMsg = {};
+        queryCourseCategoryTree(qMsg).then(res => {
+          this.TreeCategoryList = res.Data;
+          this.categoryOptions = this.TreeCategoryList;
+          this.getCourses();
+        });
+      },
+      //获取课程列表
+      getCourses() {
+        this.courseList = [];
+        var qMsg = {
+          CourseName: "",
+          CateId: 0,
+          IsQPrice: 1
+        };
+        queryCourseDropdownList(qMsg).then(res => {
+          this.courseList = res.Data;
+          this.courseOptions = this.courseList;
+        });
+      },
+      //系列筛选
+      filterFn(val, update, abort) {
+        update(() => {
+          this.categoryOptions = this.TreeCategoryList.filter(
+            v => v.CateName.indexOf(val) > -1
+          );
+        });
+      },
+      //课程筛选
+      filterCourseFn(val, update, abort) {
+        update(() => {
+          this.courseOptions = this.courseList.filter(
+            v => v.CourseName.indexOf(val) > -1
+          );
+        });
+      },
+      //系列改变
+      changeCategory() {
+        this.courseOptions = this.courseList.filter(
+          v => v.CateId == this.chosenCategory
+        );
+        this.$forceUpdate();
+      },
+      //添加课程
+      addCourse() {
+        this.$refs.JoinNum.validate();
+        this.$refs.CustomerType.validate();
+        if (!this.$refs.JoinNum.hasError && !this.$refs.CustomerType.hasError) {
+          let val = this.courseList.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;
+            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}%`;
+          }
+        });
+        return result;
+      },
+    },
+    watch: {
+
+    }
+  };
+
+</script>
+
+<style></style>

src/pages/sale/courseoffer.vue

@@ -134,8 +134,10 @@
         <template v-slot:body-cell-optioned="props">
           <q-td :props="props">
             <div>
-              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
+              <q-btn v-if="props.row.CustomerStatus==1||props.row.CustomerStatus==2" flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                 @click="editQuotation(props.row)"  />
+
+              <q-btn flat color="primary" label="转订单" @click="offerTransOrder(props.row)" />
               <q-btn flat color="primary" label="详情" @click="gotoDetails(props.row)" />
             </div>
           </q-td>
@@ -146,13 +148,19 @@
         </template>
       </q-table>
     </div>
+
     <q-dialog v-model="showForm" persistent>
       <quotation-form :obj="offerObj" @save="refreshPage()"></quotation-form>
     </q-dialog>
+
+    <q-dialog v-model="showOrderForm" persistent>
+      <offertransorder-form :obj="offerObj" @save="refreshPage()"></offertransorder-form>
+    </q-dialog>
   </div>
 </template>
 <script>
   import quotationForm from '../../components/sale/quotation-form'
+  import offertransorderForm from '../../components/sale/offertransorder-form'
   import {
     queryCourseOfferPage,
   } from '../../api/course/index'
@@ -161,7 +169,8 @@
       title: "报价单"
     },
     components: {
-      quotationForm
+      quotationForm,
+      offertransorderForm
     },
     data() {
       return {
@@ -251,6 +260,7 @@
             field: 'Id'
           }
         ],
+        showOrderForm: false, //是否显示转订单表单
       }
     },
     mounted() {
@@ -258,8 +268,15 @@
       this.getcourseofferpage();
     },
     methods: {
+      //报价单转订单
+      offerTransOrder(item) {
+        this.offerObj = item;
+        this.showOrderForm = true;
+      },
+      //刷新页面
       refreshPage() {
         this.showForm = false;
+        this.showOrderForm = false;
         this.getcourseofferpage();
       },
       gotoDetails(item) {