页面修改

src/pages/sale/appointManagement.vue

@@ -3,11 +3,30 @@
     background: transparent !important;
     border: 0 !important;
   }
+
 </style>
 <template>
   <div class="page-body">
     <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.VisitorName"
+            label="客户名称" @clear="resetSearch" maxlength="20" />
+        </div>
+        <div class="col-3">
+          <q-select @input="resetSearch" filled stack-label option-value="TId" option-label="TeacherName"
+            v-model="msg.TeacherId" :options="TeacherList" emit-value map-options label="老师" clearable />
+        </div>
+        <div class="col-3">
+          <q-select @input="resetSearch" filled stack-label option-value="RoomId" option-label="RoomName"
+            v-model="msg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室" clearable :dense="false"
+            class="col-6 q-pb-lg" emit-value map-options />
+        </div>
+        <div class="col-3">
+          <q-select @input="resetSearch" filled stack-label option-value="Id" option-label="Name"
+            v-model="msg.Q_ReserveStatus" ref="Q_ReserveStatus" :options="statusList" label="状态" clearable
+            :dense="false" class="col-6 q-pb-lg" emit-value map-options />
+        </div>
         <div class="col-4">
           <div class="col-4 Sysuser_Date">
             <q-field filled>
@@ -22,15 +41,6 @@
             </q-field>
           </div>
         </div>
-        <div class="col-3">
-          <q-select @input="resetSearch" filled option-value="TId" option-label="TeacherName" v-model="msg.TeacherId"
-            :options="TeacherList" emit-value map-options label="老师" clearable />
-        </div>
-        <div class="col-3">
-          <q-select @input="resetSearch" filled stack-label option-value="RoomId" option-label="RoomName"
-            v-model="msg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室" clearable :dense="false"
-            class="col-6 q-pb-lg" emit-value map-options />
-        </div>
       </div>
     </div>
 
@@ -41,11 +51,41 @@
         <q-space />
 
       </template>
+      <template v-slot:body-cell-OrderId="props">
+        <q-td :props="props">
+          <template v-if="props.row.OrderId && props.row.OrderId>0">
+            {{props.row.OrderId}}
+          </template>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-ReserveStatusStr="props">
+        <q-td :props="props">
+          <template v-if="props.row.ReserveStatus==0">
+            {{props.row.ReserveStatusStr}}
+          </template>
+          <template v-if="props.row.ReserveStatus==1">
+            <span style="color:green;cursor:pointer;"> {{props.row.ReserveStatusStr}}</span>
+          </template>
+          <template v-if="props.row.ReserveStatus==2">
+              <span style="color:#8F4586;cursor:pointer;"> {{props.row.ReserveStatusStr}}</span>
+              <q-tooltip :offset="[10, 10]">
+                 {{props.row.Remark}}
+               </q-tooltip>
+          </template>
+          <template v-if="props.row.ReserveStatus==3">
+            <span style="color:red;cursor:pointer;"> {{props.row.ReserveStatusStr}}</span>
+              <q-tooltip :offset="[10, 10]">
+                 {{props.row.Remark}}
+            </q-tooltip>
+          </template>
+        </q-td>
+      </template>
       <template v-slot:body-cell-Id="props">
         <q-td :props="props">
           <q-btn flat size="xs" @click="getDetail(props.row)" icon="iconfont icon-View" color="accent"
             style="font-weight:400" label="详情" />
-          <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
+          <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;"
+            v-if="props.row.ReserveStatus==0">
             <q-list>
               <q-item clickable v-close-popup @click="ExchangeOrder(props.row)">
                 <q-item-section>
@@ -71,10 +111,12 @@
           :input="true" @input="changePage" />
       </template>
     </q-table>
-    <yuekeForm v-if="isShowYue" :ChoiceType="ChoiceType" :save-obj="visitorItem" @close="closeYuekeForm" @success="refreshPage"></yuekeForm>
+    <yuekeForm v-if="isShowYue" :ChoiceType="ChoiceType" :save-obj="visitorItem" @close="closeYuekeForm"
+      @success="refreshPage"></yuekeForm>
     <exorderForm v-if="isShowExOrder" :save-obj="orderObj" @close="closeOrderForm" @success="refreshPage"></exorderForm>
     <appodetailForm v-if="isShowDetail" :save-obj="orderObj" @close="closeAppForm"></appodetailForm>
-    <exorderForm v-if="isShowExOrder" :save-obj="visitorItem" @close="closeOrderForm" @success="refreshPage"></exorderForm>
+    <exorderForm v-if="isShowExOrder" :save-obj="visitorItem" @close="closeOrderForm" @success="refreshPage">
+    </exorderForm>
   </div>
 </template>
 
@@ -108,6 +150,8 @@
           EndClassDate: "", //结束日期
           TeacherId: "",
           ClassRoomId: "",
+          Q_ReserveStatus: "", //状态
+          VisitorName: "", //客户名称
         },
         dataList: [],
         loading: false,
@@ -148,32 +192,50 @@
             field: 'ClassContent',
             align: 'left'
           },
-          {
-            name: 'OrderId',
-            label: '订单编号',
-            field: 'OrderId',
-            align: 'left'
-          },
+
           {
             name: 'ReserveStatusStr',
             label: '状态',
             field: 'ReserveStatusStr',
             align: 'left'
           },
+          {
+            name: 'OrderId',
+            label: '订单编号',
+            field: 'OrderId',
+            align: 'left'
+          },
           {
             name: 'Id',
             label: '操作',
             field: 'Id'
           }
         ],
-        TeacherList:[],
-        ClassRoomList:[],
-        isShowYue:false,
-        ChoiceType:0,
-        visitorItem:{},//选中的对象
-        isShowExOrder:false,
-        orderObj:{},
-        isShowDetail:false //显示详情
+        TeacherList: [],
+        ClassRoomList: [],
+        statusList: [{
+            Id: 0,
+            Name: "跟进中"
+          },
+          {
+            Id: 1,
+            Name: "成交"
+          },
+          {
+            Id: 2,
+            Name: "流单"
+          },
+          {
+            Id: 3,
+            Name: "取消"
+          },
+        ],
+        isShowYue: false,
+        ChoiceType: 0,
+        visitorItem: {}, //选中的对象
+        isShowExOrder: false,
+        orderObj: {},
+        isShowDetail: false //显示详情
       }
     },
     created() {
@@ -228,25 +290,25 @@
       closeYuekeForm() {
         this.isShowYue = false;
       },
-      closeOrderForm(){
+      closeOrderForm() {
         this.isShowExOrder = false;
       },
-      closeAppForm(){
+      closeAppForm() {
         this.isShowDetail = false;
-     },
+      },
       //刷新页面
       refreshPage() {
         this.getList();
       },
-      ExchangeOrder(item){
+      ExchangeOrder(item) {
         this.visitorItem = item;
-        this.isShowExOrder=true;
+        this.isShowExOrder = true;
       },
       //查看详情
-      getDetail(item){
+      getDetail(item) {
         this.orderObj = item;
         this.isShowDetail = true;
-        console.log(item,'item');
+        console.log(item, 'item');
       }
     }
   }