修改

src/views/system/trainingOrder/index.vue

@@ -1,38 +1,19 @@
 <template>
   <div class="app-container">
-    <el-form
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="100px"
-    >
       <el-form-item label="所属护理站" prop="nurseStationName">
         <el-select v-model="queryParams.nurseStationId" placeholder="请选择护理站" @change="handleQuery">
-          <el-option
+          <el-option v-for="item in handstationlist" :key="item.id" :label="item.nurseStationName"
-            v-for="item in handstationlist"
+            :value="item.id"></el-option>
-            :key="item.id"
-            :label="item.nurseStationName"
-            :value="item.id"
-          ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="护理员姓名" prop="nursePersonName">
-        <el-input
+        <el-input v-model="queryParams.nursePersonName" placeholder="请输入护理员姓名" clearable
-          v-model="queryParams.nursePersonName"
+          @keyup.enter.native="handleQuery" />
-          placeholder="请输入护理员姓名"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="订单编号" prop="trainingOrderNo">
-        <el-input
+        <el-input v-model="queryParams.trainingOrderNo" placeholder="请输入订单编号" clearable
-          v-model="queryParams.trainingOrderNo"
+          @keyup.enter.native="handleQuery" />
-          placeholder="请输入订单编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <!-- <el-form-item label="订单金额" prop="trainingOrderAmount">
         <el-input
@@ -44,12 +25,8 @@
       </el-form-item>-->
       <el-form-item label="订单状态" prop="trainingOrderStatus">
         <el-select v-model="queryParams.trainingOrderStatus" placeholder="请选择订单状态" clearable>
-          <el-option
+          <el-option v-for="item in trainingOrderStatusoptions" :key="item.value" :label="item.label"
-            v-for="item in trainingOrderStatusoptions"
+            :value="item.value"></el-option>
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
         </el-select>
       </el-form-item>
 
@@ -63,12 +40,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table
+    <el-table v-loading="loading" :data="trainingOrderList" @selection-change="handleSelectionChange">
-      v-loading="loading"
-      :data="trainingOrderList"
-      @selection-change="handleSelectionChange"
-    >
-      ]
       <el-table-column label="所属护理站" align="center" prop="nurseStationName" />
       <el-table-column label="护理员姓名" align="center" prop="nursePersonName" />
       <el-table-column label="订单编号" align="center" prop="trainingOrderNo" />
@@ -81,20 +53,19 @@
           <el-button type="success" v-if="scope.row.trainingOrderStatus == 'REFUNDED'">已退款</el-button>
         </template>
       </el-table-column>
-
       <el-table-column label="订单金额" align="center" prop="trainingOrderAmount" />
       <el-table-column label="下单方式" align="center" prop="trainingOrderChannel">
         <template slot-scope="scope">
           {{ scope.row.trainingOrderChannel == "MOBILE_APP" ? "手机App" : "" }}
           {{
-          scope.row.trainingOrderChannel == "WECHAT_APPLET"
+            scope.row.trainingOrderChannel == "WECHAT_APPLET"
-          ? "微信小程序"
+            ? "微信小程序"
-          : ""
+            : ""
           }}
           {{
-          scope.row.trainingOrderChannel == "ALI_PAY_APPLET"
+            scope.row.trainingOrderChannel == "ALI_PAY_APPLET"
-          ? "支付宝小程序"
+            ? "支付宝小程序"
-          : ""
+            : ""
           }}
         </template>
       </el-table-column>
@@ -102,74 +73,32 @@
       <!-- <el-table-column label="备注信息" align="center" prop="remark" /> -->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="handleUpdate(scope.row)">查看</el-button>
-            size="mini"
+          <el-button size="mini" type="text" icon="el-icon-error" @click="cencel(scope.row)"
-            type="text"
+            v-if="scope.row.trainingOrderStatus == 'PAY'">退款</el-button>
-            icon="el-icon-zoom-in"
-            @click="handleUpdate(scope.row)"
-          >查看</el-button>
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-error"
-            @click="cencel(scope.row)"
-            v-if="scope.row.trainingOrderStatus == 'PAY'"
-          >退款</el-button>
         </template>
       </el-table-column>
     </el-table>
-
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-    <pagination
+      @pagination="getList" />
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
     <!-- 退款弹框 -->
     <el-dialog title="退款" :visible.sync="innerrefund" append-to-body width="500px">
       <el-form :inline="true" :rules="rules" label-width="120px">
         <el-form-item label="订单编号" prop="trainingOrderNo">
-          <el-input
+          <el-input style="width: 260px" v-model="query.trainingOrderNo" clearable :disabled="true" />
-            style="width: 260px"
-            v-model="query.trainingOrderNo"
-            clearable
-            :disabled="true"
-          />
         </el-form-item>
         <el-form-item label="培训课程名" prop="trainingItemTitle">
-          <el-input
+          <el-input style="width: 260px" v-model="query.trainingItemTitle" clearable :disabled="true" />
-            style="width: 260px"
-            v-model="query.trainingItemTitle"
-            clearable
-            :disabled="true"
-          />
         </el-form-item>
         <el-form-item label="护理站名称" prop="nurseStationName">
-          <el-input
+          <el-input style="width: 260px" v-model="query.nurseStationName" clearable :disabled="true" />
-            style="width: 260px"
-            v-model="query.nurseStationName"
-            clearable
-            :disabled="true"
-          />
         </el-form-item>
 
         <el-form-item label="退款金额" prop="trainingOrderAmount">
-          <el-input
+          <el-input v-model="query.trainingOrderAmount" style="width: 260px" clearable :disabled="true" />
-            v-model="query.trainingOrderAmount"
-            style="width: 260px"
-            clearable
-            :disabled="true"
-          />
         </el-form-item>
         <el-form-item label="护理员姓名" prop="nursePersonName">
-          <el-input
+          <el-input v-model="query.nursePersonName" style="width: 260px" clearable :disabled="true" />
-            v-model="query.nursePersonName"
-            style="width: 260px"
-            clearable
-            :disabled="true"
-          />
         </el-form-item>
         <!-- <el-form-item label="退款原因" prop="cancelAppointmentReason">
           <el-input
@@ -200,53 +129,43 @@
         <el-form-item label="订单金额" prop="trainingOrderAmount">
           <div class="text">{{ form.trainingOrderAmount }}</div>
         </el-form-item>
-
         <el-form-item label="下单方式" prop="trainingOrderChannel">
           <div class="text">{{ form.trainingOrderChannel }}</div>
         </el-form-item>
         <el-form-item label="下单时间" prop="trainingOrderTime">
           <div class="text">{{ form.trainingOrderTime }}</div>
         </el-form-item>
-        <el-table
+        <el-table :data="form.trainingOrderDetailsList" align="center" v-loading="loading"
-          :data="form.trainingOrderDetailsList"
+          style="margin: 10px 0 20px 0; padding-bottom: 20px">
-          align="center"
-          v-loading="loading"
-          style="margin: 10px 0 20px 0; padding-bottom: 20px"
-        >
           <el-table-column prop="trainingItemTitle" label="培训课程名称" align="center"></el-table-column>
           <el-table-column prop="trainingItemType" label="课程类型" align="center">
             <template slot-scope="scope">
               {{
-              scope.row.trainingItemType == "VIDEO_LEARNING" ? "视频学习" : ""
+                scope.row.trainingItemType == "VIDEO_LEARNING" ? "视频学习" : ""
               }}
               {{
-              scope.row.trainingItemType == "GRAPHIC_LEARNING"
+                scope.row.trainingItemType == "GRAPHIC_LEARNING"
-              ? "图文学习"
+                ? "图文学习"
-              : ""
+                : ""
               }}
               {{
-              scope.row.trainingItemType == "LIVE_COURSES" ? "直播课程" : ""
+                scope.row.trainingItemType == "LIVE_COURSES" ? "直播课程" : ""
               }}
               {{
-              scope.row.trainingItemType == "OFFLINE_TRAINING"
+                scope.row.trainingItemType == "OFFLINE_TRAINING"
-              ? "线下培训"
+                ? "线下培训"
-              : ""
+                : ""
               }}
               {{
-              scope.row.trainingItemType == "LEARNING_ITEM_GROUP"
+                scope.row.trainingItemType == "LEARNING_ITEM_GROUP"
-              ? "学习培训课程组"
+                ? "学习培训课程组"
-              : ""
+                : ""
               }}
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
-              <el-button
+              <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="handlelook(scope.row)">查看</el-button>
-                size="mini"
-                type="text"
-                icon="el-icon-zoom-in"
-                @click="handlelook(scope.row)"
-              >查看</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -255,37 +174,24 @@
     <!-- 查看图文 -->
     <el-dialog title="查看图文" :visible.sync="innerrefundvideo" append-to-body width="1000px">
       <el-form :inline="true" :rules="rules" label-width="130px" :model="formlist">
-        <el-form-item
+        <el-form-item label="培训课程详情" prop="trainingItemDetails" v-if="
-          label="培训课程详情"
+          formlist.trainingItemType == 'VIDEO_LEARNING' ||
-          prop="trainingItemDetails"
+          formlist.trainingItemType == 'LEARNING_ITEM_GROUP'
-          v-if="
+        ">
-            formlist.trainingItemType == 'VIDEO_LEARNING' ||
-            formlist.trainingItemType == 'LEARNING_ITEM_GROUP'
-          "
-        >
           <div class="textdetails">{{ formlist.trainingItemDetails }}</div>
         </el-form-item>
-        <el-form-item
+        <el-form-item :label="
-          :label="
+          formlist.trainingItemType == 'GRAPHIC_LEARNING'
-            formlist.trainingItemType == 'GRAPHIC_LEARNING'
+            ? '培训课程内容'
-              ? '培训课程内容'
+            : formlist.trainingItemType == 'LEARNING_ITEM_GROUP'
-              : formlist.trainingItemType == 'LEARNING_ITEM_GROUP'
               ? '培训课程介绍'
               : ''
-          "
+        " prop="trainingItemContent" v-if="
-          prop="trainingItemContent"
+  formlist.trainingItemType == 'GRAPHIC_LEARNING' ||
-          v-if="
+  formlist.trainingItemType == 'LEARNING_ITEM_GROUP'
-            formlist.trainingItemType == 'GRAPHIC_LEARNING' ||
+">
-            formlist.trainingItemType == 'LEARNING_ITEM_GROUP'
+          <editor @imgs="imgs" :url="'/common/uploadTrainingItemContentUrl'" v-model="formlist.trainingItemContent"
-          "
+            :min-height="150" style="width: 600px" />
-        >
-          <editor
-            @imgs="imgs"
-            :url="'/common/uploadTrainingItemContentUrl'"
-            v-model="formlist.trainingItemContent"
-            :min-height="150"
-            style="width: 600px"
-          />
         </el-form-item>
         <el-form-item label="培训课程封面图片" prop="trainingItemCoverUrl">
           <img class="img" :src="baseurl + formlist.trainingItemCoverUrl" alt />
@@ -293,13 +199,8 @@
         <el-form-item label="培训课程海报图片" prop="trainingItemPosterUrl">
           <img class="img" :src="baseurl + formlist.trainingItemPosterUrl" alt />
         </el-form-item>
-        <el-table
+        <el-table ref="list" v-if="formlist.trainingItemType == 'VIDEO_LEARNING'" v-loading="loading"
-          ref="list"
+          style="margin-top: 20px; width: 1250px" :data="formlist.list">
-          v-if="formlist.trainingItemType == 'VIDEO_LEARNING'"
-          v-loading="loading"
-          style="margin-top: 20px; width: 1250px"
-          :data="formlist.list"
-        >
           <el-table-column label="章节视频" align="center" width="300">
             <template slot-scope="scope">
               <video class="img" :src="baseurl + scope.row.itemDirectoryUrl" controls="controls"></video>
@@ -321,7 +222,7 @@
   </div>
 </template>
   
-  <script>
+<script>
 import {
   listTrainingOrder,
   getTrainingOrder,
@@ -494,7 +395,7 @@ export default {
         });
       }
     },
-    imgUrl4(imgUrl) {},
+    imgUrl4(imgUrl) { },
     // 取消按钮
     cencelbtn() {
       this.innerrefund = false;
@@ -663,14 +564,14 @@ export default {
       const ids = row.id || this.ids;
       this.$modal
         .confirm('是否确认删除学习培训订单主编号为"' + ids + '"的数据项？')
-        .then(function() {
+        .then(function () {
           return delTrainingOrder(ids);
         })
         .then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -685,12 +586,13 @@ export default {
   }
 };
 </script>
-  <style lang="scss">
+<style lang="scss">
 .img {
   width: 150px;
   height: 150px;
   margin-left: 10px;
 }
+
 .text {
   width: 250px;
   height: 36px;
@@ -701,6 +603,7 @@ export default {
   padding: 0 15px;
   border: 1px solid #e6ebf5;
 }
+
 .textdetail {
   width: 550px;
   // height: 600px;
@@ -711,6 +614,7 @@ export default {
   padding: 0 15px;
   border: 1px solid #e6ebf5;
 }
+
 .stationbtn {
   width: 208px;
   text-align: left;
@@ -718,6 +622,7 @@ export default {
   overflow: hidden;
   font-size: 14px;
 }
+
 .textdetails {
   width: 600px;
   // height: 300px;
@@ -728,12 +633,14 @@ export default {
   padding: 0 15px;
   border: 1px solid #e6ebf5;
 }
+
 ::v-deep .wihi {
   text-align: left !important;
   // width: 208px !important;
   // height: 208px !important;
   background: none;
 }
+
 ::v-deep .video-avatar {
   transform: translateX(-25%);
 }