页面修改

src/pages/sale/courseoffer.vue

@@ -133,33 +133,17 @@
         </template>
         <template v-slot:body-cell-OrderIdList="props">
           <q-td :props="props">
-            <span title="点击查看订单" v-for="item in props.row.OrderIdList" style="cursor:pointer;color:blue;margin-left:5px;" @click="goOrderList(item)">{{item}}</span>
+            <span title="点击查看订单" v-for="item in props.row.OrderIdList"
+              style="cursor:pointer;color:blue;margin-left:5px;" @click="goOrderList(item)">{{item}}</span>
           </q-td>
         </template>
         <template v-slot:body-cell-optioned="props">
           <q-td :props="props">
             <div>
-              <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-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
-                <q-list>
-                  <q-item clickable v-close-popup @click="gotoDetails(props.row)">
-                    <q-item-section>
-                      <q-item-label>详情</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                  <q-item clickable v-close-popup v-if="props.row.CustomerStatus==1||props.row.CustomerStatus==2" @click="offerTransOrder(props.row)">
-                    <q-item-section>
-                      <q-item-label>转订单</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                  <q-item clickable v-close-popup @click="editOrderPrice(props.row)">
-                    <q-item-section>
-                      <q-item-label>改价</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-btn-dropdown>
+              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="改价"
+                @click="editOrderPrice(props.row)" />
+              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="详情"
+                @click="gotoDetails(props.row)" />
             </div>
           </q-td>
         </template>
@@ -191,7 +175,9 @@
   import {
     queryCourseOfferPage,
   } from '../../api/course/index'
-  import { mapState } from "vuex";
+  import {
+    mapState
+  } from "vuex";
 
   export default {
     meta: {
@@ -213,7 +199,7 @@
           rowsPerPage: 10,
           Name: "",
           IsGetDetails: 1,
-          CreateBy:0
+          CreateBy: 0
         },
         pageCount: 0,
         showForm: false, //是否显示报价单弹窗
@@ -297,30 +283,30 @@
           }
         ],
         showOrderForm: false, //是否显示转订单表单
-        commonId:0,
-        showEditPrice:false, //是否显示改价表单
+        commonId: 0,
+        showEditPrice: false, //是否显示改价表单
       }
     },
     computed: mapState({
       isHavePriceAction(state) {
-        if (state.user.userInfo&&state.user.userInfo.ActionMenuList) {
-          let commonNum=0;
+        if (state.user.userInfo && state.user.userInfo.ActionMenuList) {
+          let commonNum = 0;
           let action = state.user.userInfo.ActionMenuList.find(x => {
             if (x.FunctionCode == "Query_All_Offer") {
-              commonNum+=1;
+              commonNum += 1;
             }
           });
-          this.commonId=state.user.userInfo.Id;
+          this.commonId = state.user.userInfo.Id;
           return commonNum;
         }
       }
     }),
     mounted() {
       this.currentUrl = this.$route.path;
-      if(this.isHavePriceAction>0){
-        this.msg.CreateBy=0;
-      }else{
-        this.msg.CreateBy=this.commonId;
+      if (this.isHavePriceAction > 0) {
+        this.msg.CreateBy = 0;
+      } else {
+        this.msg.CreateBy = this.commonId;
       }
       this.getcourseofferpage();
     },
@@ -340,7 +326,7 @@
         this.showOrderForm = true;
       },
       //改价
-      editOrderPrice(item){
+      editOrderPrice(item) {
         this.offerObj = item;
         this.showEditPrice = true;
       },

src/pages/sale/myoffer.vue

+<style>
+  li {
+    list-style-type: none;
+  }
+
+  .courseOffer ul {
+    padding: 0px;
+  }
+
+  .courseOffer li {
+    background: rgba(221, 222, 224, 0.2);
+    border-radius: 4px;
+    margin-top: 15px;
+  }
+
+  .courseOffer li .dline {
+    display: table;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .courseOffer li .d1,
+  .courseOffer li .d2,
+  .courseOffer li .d3,
+  .courseOffer li .d4,
+  .courseOffer li .d5 {
+    width: 18%;
+    padding: 20px 20px 10px;
+  }
+
+  .courseOffer li .d7 {
+    flex: 1;
+    width: 1px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .courseOffer li .d1 .di-title {
+    font-size: 16px;
+    color: #111111;
+  }
+
+  .courseOffer li .d1 .di-c {
+    font-size: 14px;
+    display: flex;
+    line-height: 28px;
+    color: #111111;
+  }
+
+  .courseOffer li .d6 {
+    padding: 10px 20px;
+    width: 100%;
+    height: inherit;
+    position: relative;
+    border-top: 1px solid #dddee0;
+  }
+
+  .courseOffer li .d6 .progress {
+    width: 100%;
+    height: 5px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+
+  .courseOffer li .d2 div {
+    margin: 2px 0;
+    font-size: 14px;
+    color: #111111;
+  }
+
+  .courseOffer li .d2-n {
+    font-size: 12px;
+    color: #999999;
+    margin-right: 20px;
+  }
+
+  .courseOffer li .d3 .d3-s {
+    color: var(--q-color-negative);
+    font-weight: bold;
+  }
+
+  .courseOffer li .d3 div {
+    margin: 2px 0;
+    font-size: 14px;
+  }
+
+  .courseOffer li .d4 div {
+    font-size: 14px;
+    color: #111111;
+    margin: 2px 0;
+  }
+
+  .courseOffer li .d5 div {
+    font-size: 14px;
+    color: #111111;
+    margin: 2px 0;
+  }
+
+  .courseOffer .myCourseNName {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    color: #fff !important;
+    text-align: center;
+    line-height: 25px;
+    background-color: #004d40;
+  }
+
+</style>
+<template>
+  <div class="page-body courseOffer">
+    <div class="page-search row items-center">
+      <div class="col row wrap q-mr-lg q-col-gutter-md">
+        <div class="col-3">
+          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Name" label="报价单名称"
+            @clear="resetSearch" maxlength="20" />
+        </div>
+      </div>
+    </div>
+    <div class="page-content">
+      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
+        separator="none" :data="data" :columns="columns" row-key="name">
+        <template v-slot:top="props">
+          <div class="col-2 q-table__title">我的报价单</div>
+          <q-space />
+          <div class="page-option">
+            <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="创建报价单" @click="editQuotation(null)" />
+          </div>
+        </template>
+        <template v-slot:body-cell-OrderIdList="props">
+          <q-td :props="props">
+            <span title="点击查看订单" v-for="item in props.row.OrderIdList"
+              style="cursor:pointer;color:blue;margin-left:5px;" @click="goOrderList(item)">{{item}}</span>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-optioned="props">
+          <q-td :props="props">
+            <div>
+              <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-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
+                <q-list>
+                  <q-item clickable v-close-popup @click="gotoDetails(props.row)">
+                    <q-item-section>
+                      <q-item-label>详情</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup v-if="props.row.CustomerStatus==1||props.row.CustomerStatus==2"
+                    @click="offerTransOrder(props.row)">
+                    <q-item-section>
+                      <q-item-label>转订单</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup @click="editOrderPrice(props.row)">
+                    <q-item-section>
+                      <q-item-label>改价</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </div>
+          </q-td>
+        </template>
+        <template v-slot:bottom>
+          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
+            :input="true" @input="changePage" />
+        </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>
+
+    <q-dialog v-model="showEditPrice" persistent>
+      <edittransorder-form :obj="offerObj" @save="refreshPage()"></edittransorder-form>
+    </q-dialog>
+
+  </div>
+</template>
+<script>
+  import quotationForm from '../../components/sale/quotation-form'
+  import offertransorderForm from '../../components/sale/offertransorder-form'
+  import edittransorderForm from '../../components/sale/edittransorder-form'
+  import {
+    queryCourseOfferPage,
+  } from '../../api/course/index'
+  import {
+    mapState
+  } from "vuex";
+
+  export default {
+    meta: {
+      title: "报价单"
+    },
+    components: {
+      quotationForm,
+      offertransorderForm,
+      edittransorderForm
+    },
+    data() {
+      return {
+        currentUrl: "",
+        data: [],
+        loading: true,
+        msg: {
+          pageIndex: 1,
+          pageSize: 10,
+          rowsPerPage: 10,
+          Name: "",
+          IsGetDetails: 1,
+          CreateBy: 0
+        },
+        pageCount: 0,
+        showForm: false, //是否显示报价单弹窗
+        offerObj: {}, //报价单信息
+        columns: [{
+            name: "SerialNum",
+            label: "流水号",
+            field: "SerialNum",
+            align: "left"
+          },
+          {
+            name: "Name",
+            label: "名称",
+            field: "Name",
+            align: "left"
+          },
+          {
+            name: "CustomerName",
+            required: true,
+            label: "客户信息",
+            align: "left",
+            field: row => row.CustomerName
+          },
+          {
+            name: "CustomerTel",
+            required: true,
+            label: "客户电话",
+            align: "left",
+            field: row => row.CustomerTel
+          },
+          {
+            name: "TotalOriginalPrice",
+            required: true,
+            label: "总原价",
+            align: "left",
+            field: row => row.TotalOriginalPrice.toFixed(2)
+          },
+          {
+            name: "TotalPrice",
+            required: true,
+            label: "总价",
+            align: "left",
+            field: row => row.TotalPrice.toFixed(2)
+          },
+          {
+            name: "TotalDiscountPrice",
+            required: true,
+            label: "总优惠",
+            align: "left",
+            field: row => row.TotalDiscountPrice.toFixed(2)
+          },
+          {
+            name: "JoinNum",
+            label: "报名人数",
+            field: "JoinNum",
+            align: "left",
+            format: (val, row) => `${val}人`
+          },
+          {
+            name: "CustomerStatusName",
+            label: "状态",
+            field: "CustomerStatusName",
+            align: "left",
+            format: (val, row) => `${val}`
+          },
+          {
+            name: "CreateTimeStr",
+            label: "报价时间",
+            field: "CreateTimeStr",
+            align: "left"
+          },
+          {
+            name: "OrderIdList",
+            label: "订单号",
+            field: "OrderIdList",
+          },
+          {
+            name: 'optioned',
+            label: '操作',
+            field: 'Id'
+          }
+        ],
+        showOrderForm: false, //是否显示转订单表单
+        commonId: 0,
+        showEditPrice: false, //是否显示改价表单
+      }
+    },
+
+    mounted() {
+      this.currentUrl = this.$route.path;
+      this.msg.CreateBy = this.getLocalStorage().Id;
+      this.getcourseofferpage();
+    },
+    methods: {
+      //跳转到订单列表
+      goOrderList(item) {
+        this.$router.push({
+          path: "/sale/myOrder",
+          query: {
+            OrderId: item
+          }
+        });
+      },
+      //报价单转订单
+      offerTransOrder(item) {
+        this.offerObj = item;
+        this.showOrderForm = true;
+      },
+      //改价
+      editOrderPrice(item) {
+        this.offerObj = item;
+        this.showEditPrice = true;
+      },
+      //刷新页面
+      refreshPage() {
+        this.showForm = false;
+        this.showOrderForm = false;
+        this.showEditPrice = false;
+        this.getcourseofferpage();
+      },
+      gotoDetails(item) {
+        this.$router.push({
+          path: "/sale/quotation",
+          query: {
+            Id: item.Id
+          }
+        });
+      },
+      //显示报价单
+      editQuotation(item) {
+        this.showForm = true;
+        this.offerObj = item;
+      },
+      //重新查询
+      resetSearch() {
+        this.msg.pageIndex = 1;
+        this.getcourseofferpage();
+      },
+      //翻页
+      changePage(val) {
+        this.msg.pageIndex = val;
+        this.getcourseofferpage()
+      },
+      //获取报价单分页列表
+      getcourseofferpage() {
+        this.loading = true;
+        queryCourseOfferPage(this.msg).then(res => {
+          this.loading = false
+          this.data = res.Data.PageData;
+          this.pageCount = res.Data.PageCount;
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+    }
+  }
+
+</script>
+<style lang="sass">
+  @import url('~assets/css/table.sass')
+
+</style>

src/router/routes.js

@@ -427,10 +427,15 @@ const routes = [{
           import("pages/sale/courseList.vue")
       },
       {
-        path: "/sale/courseoffer", //销售 报价单
+        path: "/sale/courseoffer", //销售 报价单管理
         component: () =>
           import("pages/sale/courseoffer.vue")
       },
+      {
+        path: "/sale/myoffer", //销售 我的报价单
+        component: () =>
+          import("pages/sale/myoffer.vue")
+      },
       {
         path: "/sale/myOrder", //销售 我的订单
         component: () =>