页面修改

src/pages/sale/myOrder.vue

@@ -2,50 +2,48 @@
   <div class="page-body myOrder">
     <div style="width: 100%;display: flex;justify-content: space-between">
       <span style="font-size: 20px;font-weight: 400; ">日语培训订单</span>
-      <span><q-toggle v-model="msg.Q_NotCollect" label="只看款未收齐订单" class="q-mb-md" false-value="0"  true-value="1" @input="resetSearch"/></span>
+      <span>
+        <q-toggle v-model="msg.Q_NotCollect" label="只看款未收齐订单" class="q-mb-md" false-value="0" true-value="1"
+          @input="resetSearch" /></span>
     </div>
     <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 @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.OrderId" label="订单号"
-                   @clear="resetSearch" />
+            @clear="resetSearch" maxlength="10" />
         </div>
         <div class="col-3">
           <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.GuestName" label="客户名称"
-                   @clear="resetSearch" />
+            @clear="resetSearch" maxlength="20" />
         </div>
         <div class="col-3">
           <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ClassName" label="班级名称"
-                   @clear="resetSearch" />
+            @clear="resetSearch" maxlength="20" />
         </div>
-
-
         <div class="col-3">
-          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="CourseId" option-label="CourseName"
-                    v-model="msg.CourseName" :options="ClassList" emit-value map-options label="学习课程" />
+          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="CourseId"
+            option-label="CourseName" v-model="msg.CouseId" :options="CourseList" emit-value map-options label="学习课程" />
         </div>
         <div class="col-3">
           <q-select @input="resetSearch" standout="bg-primary text-white" option-value="Id" option-label="Name"
-                    v-model="msg.OrderState" :options="OrderState" emit-value map-options label="订单状态" />
+            v-model="msg.OrderState" :options="OrderStateList" emit-value map-options label="订单状态" />
         </div>
-
         <div class="col-3">
           <q-field filled>
-           <template v-slot:control>
-            <el-date-picker v-model="dateList" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
-             range-separator="至"  start-placeholder="报名开始时间"  end-placeholder="报名结束时间">
-             </el-date-picker>       
+             <template v-slot:control>
+              <el-date-picker v-model="dateList" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
+                 range-separator="至"  start-placeholder="报名开始时间"  end-placeholder="报名结束时间">
+                 </el-date-picker>       
             </template>
           </q-field>
         </div>
         <div class="col-3">
           <q-field filled>
-           <template v-slot:control>
-          <el-date-picker v-model="dateList2" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
-           range-separator="至"  start-placeholder="开班开始时间"  end-placeholder="开班结束时间">
-           </el-date-picker>       
-          </template>
+             <template v-slot:control>
+              <el-date-picker v-model="dateList2" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
+                 range-separator="至"  start-placeholder="开班开始时间"  end-placeholder="开班结束时间">
+                 </el-date-picker>       
+            </template>
           </q-field>
         </div>
       </div>
@@ -98,48 +96,32 @@
         <span>已通过</span>
       </div>
     </div>
-
-    <div class="page-content" >
-      <orderlist :dataList="data.List" :isShowClass="true" :Comtype="1" @success="refreshClassOrder" ref="orderL"></orderlist>
+    <div class="page-content">
+      <orderlist :dataList="data.List" :isShowClass="true" :Comtype="1" @success="refreshClassOrder" ref="orderL">
+      </orderlist>
       <div class="row" style="justify-content: flex-end;padding: 5px 20px">
-        <q-pagination
-          v-model="msg.pageIndex"
-          :max="pageCount"
-          @input="changePage"
-          class="full-width justify-end" color="primary" :input="true"
-        >
+        <q-pagination v-model="msg.pageIndex" :max="pageCount" @input="changePage" class="full-width justify-end"
+          color="primary" :input="true">
         </q-pagination>
       </div>
     </div>
-
-<classinfo-form v-if="isShowClassInfo" :seting-obj="classObjOption" @close="closeClass" @success="refreshClass"></classinfo-form>
-
-</div>
+    <classinfo-form v-if="isShowClassInfo" :seting-obj="classObjOption" @close="closeClass"
+      @success="refreshClassOrder">
+    </classinfo-form>
+  </div>
 </template>
 <script>
   import {
-    getMyOrderPageList,//获取订单列表
-    getOrderStateEnumList,//订单状态
-    updateOrderRemark,//修改订单备注
-    setClassOrderCareOf,//订单转交
-    cancelClassOrder,//订单取消
-    getClassOrderInfo,//获取订单详情
-    getOrderSourceEnumList,//获取订单来源 枚举
-    setClassOrder,//修改订单
+    getMyOrderPageList, //获取订单列表
+    getOrderStateEnumList //订单状态
   } from '../../api/sale/sale';
-  import {
-    queryEmployee
-  } from '../../api/users/user'
   import {
     queryCourseDropdownList,
   } from '../../api/course/index'
   import myOrderForm from '../../components/sale/myOrder-form'
   import classinfoForm from '../../components/course/classinfo-form';
   import orderlist from '../../components/sale/orderlist'
-
-
   export default {
-
     components: {
       myOrderForm,
       classinfoForm,
@@ -147,50 +129,45 @@
     },
     data() {
       return {
-        dialog:false,
+        dialog: false,
         data: {},
         loading: false,
-        dateList:[],//报名时间
-        dateList2:[],//开班时间
+        dateList: [], //报名时间
+        dateList2: [], //开班时间
         msg: {
           pageIndex: 1,
           pageSize: 8,
-          OrderId:'',//订单号
-          GuestName:'',//客人名称
+          OrderId: '', //订单号
+          GuestName: '', //客人名称
           ClassName: '', //班级名称
-          CouseId:0,//课程id
-          StartTime:'',//报名开始时间
-          EndTime:'',//报名结束时间
-          OPStartTime:'',//开班开始时间
-          OPEndTime:'',//开班结束时间
-          Q_NotCollect:'0',//查询未收齐 1是 0否
-          OrderState:0,//订单状态 枚举
-          Q_OrderState:1,//查询 1正常订单 2取消订单 (默认传1 如果 选择了订单状态 则传 0)
-          Q_OrderBy:2,//写死 =2
-          PlatformTax:0,//平台税金
+          CouseId: 0, //课程id
+          StartTime: '', //报名开始时间
+          EndTime: '', //报名结束时间
+          OPStartTime: '', //开班开始时间
+          OPEndTime: '', //开班结束时间
+          Q_NotCollect: '0', //查询未收齐 1是 0否
+          OrderState: 0, //订单状态 枚举
+          Q_OrderState: 1, //查询 1正常订单 2取消订单 (默认传1 如果 选择了订单状态 则传 0)
+          Q_OrderBy: 2, //写死 =2
+          PlatformTax: 0, //平台税金
         },
-
         //订单状态
-        OrderState: [],
+        OrderStateList: [],
         pageCount: 0,
-        ClassList: [], //关联课程下拉数据
-        options:[],
-        myorderObjOption:{},
+        CourseList: [], //关联课程下拉数据
         classObjOption: null,
         isShowClassInfo: false, //是否显示课程信息
-        showone:false,
+        showone: false,
       }
     },
     created() {
       this.getOrderState();
-      this.CourseList();
+      this.getCourseList();
     },
     mounted() {
       this.getList();
-
     },
     methods: {
-
       //订单状态
       getOrderState() {
         getOrderStateEnumList({}).then(res => {
@@ -203,31 +180,34 @@
               Id: 0,
               Name: "不限"
             })
-            this.OrderState = tempArray;
+            this.OrderStateList = tempArray;
           }
         })
       },
-
-
       //获取课程
-      CourseList() {
+      getCourseList() {
         queryCourseDropdownList({}).then(res => {
           if (res.Code == 1) {
-            this.ClassList = res.Data;
+            var tempArray = res.Data;
+            if (!tempArray) {
+              tempArray = [];
+            }
+            tempArray.unshift({
+              CourseId: 0,
+              CourseName: "不限"
+            })
+            this.CourseList = tempArray;
           }
         })
       },
-
-
       //翻页
       changePage(val) {
-        if(this.showone == true){
+        if (this.showone == true) {
           this.msg.pageIndex = val;
           this.getList()
-        }else {
-          this.showone=true
+        } else {
+          this.showone = true
         }
-
       },
       resetSearch() {
         this.msg.pageIndex = 1;
@@ -250,75 +230,98 @@
           this.msg.OPEndTime = '';
         }
         let msg = JSON.parse(JSON.stringify(this.msg));
-        if(msg.OrderId==''|| msg.OrderId==null){
-          msg.OrderId=0
+        if (msg.OrderId == '' || msg.OrderId == null) {
+          msg.OrderId = 0
         }
         this.loading = true;
         getMyOrderPageList(msg).then(res => {
-
           this.data = res.Data.PageData;
-
-          let OrderIds=[]
-          this.data.List.forEach(x=>{
+          let OrderIds = []
+          this.data.List.forEach(x => {
             OrderIds.push(x.OrderId)
           })
           this.loading = false
           OrderIds = OrderIds.join(',')
-          // this.getOrderFinanceList(OrderIds)
-
-          if( this.data.List.length>0){
-            this.$refs.orderL.getOrderFinanceList(OrderIds,1)
-
+          if (this.data.List.length > 0) {
+            this.$refs.orderL.getOrderFinanceList(OrderIds, 1)
           }
-
           this.pageCount = res.Data.PageCount;
         }).catch(() => {
           this.loading = false
         })
       },
-
-
       //刷新页面
       refreshClassOrder() {
         this.getList();
       },
-
-      getClassInfo(obj) {//打开班级详情组件
+      getClassInfo(obj) { //打开班级详情组件
         this.classObjOption = obj;
         this.isShowClassInfo = true;
       },
       //关闭班级信息弹窗
       closeClass() {
-        this.isShowClassInfo = false
+        this.isShowClassInfo = false;
       },
-      //刷新
-      refreshClass() {
-
-      },
-
     }
   }
 
 </script>
-<style >
-  li{
-    list-style-type:none ;
+<style>
+  li {
+    list-style-type: none;
+  }
+
+  .myOrder ul {
+    padding: 0px
+  }
+
+  .myOrder .price-popup {
+    border-radius: 4px;
   }
-  .myOrder ul{padding: 0px}
-  .myOrder .price-popup{border-radius: 4px;}
+
   .myOrder .el-range-editor .el-range-input {
     background: transparent;
   }
+
   .myOrder .el-range-editor.el-input__inner {
     background-color: transparent;
   }
-  .myOrder .q-mb-md{
+
+  .myOrder .q-mb-md {
     margin-bottom: 0;
   }
-  .myOrder .stics{padding:10px 20px;background: #DDDEE0;border-radius: 4px;font-size: 14px;color: #000000;font-weight: bold}
-  .myOrder .stics .stics-name{color: #2D2D2D;font-weight: 600;margin-right: 10px}
-  .myOrder .tis {margin:10px 0;align-items: center}
-  .myOrder .tis .tis-k{width: 10px;height: 10px;margin-right: 8px}
-  .myOrder .tis span{font-size: 14px;color: #2D2D2D;font-weight: 600;margin-right: 20px}
+
+  .myOrder .stics {
+    padding: 10px 20px;
+    background: #DDDEE0;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #000000;
+    font-weight: bold
+  }
+
+  .myOrder .stics .stics-name {
+    color: #2D2D2D;
+    font-weight: 600;
+    margin-right: 10px
+  }
+
+  .myOrder .tis {
+    margin: 10px 0;
+    align-items: center
+  }
+
+  .myOrder .tis .tis-k {
+    width: 10px;
+    height: 10px;
+    margin-right: 8px
+  }
+
+  .myOrder .tis span {
+    font-size: 14px;
+    color: #2D2D2D;
+    font-weight: 600;
+    margin-right: 20px
+  }
 
 </style>