修改

src/views/system/trainingOrder/index.vue

@@ -8,46 +8,30 @@
       v-show="showSearch"
       label-width="100px"
     >
-      <!-- <el-form-item label="护理站id" prop="nurseStationId">
+      <el-form-item label="护理员姓名" prop="nursePersonName">
-          <el-input
+        <el-input
-            v-model="queryParams.nurseStationId"
+          v-model="queryParams.nursePersonName"
-            placeholder="请输入护理站id"
+          placeholder="请输入护理员姓名"
-            clearable
+          clearable
-            @keyup.enter.native="handleQuery"
+          @keyup.enter.native="handleQuery"
-          />
+        />
-        </el-form-item>
+      </el-form-item>
-        <el-form-item label="护理员表id" prop="nurseStationPersonId">
+      <el-form-item label="订单编号" prop="trainingOrderNo">
-          <el-input
+        <el-input
-            v-model="queryParams.nurseStationPersonId"
+          v-model="queryParams.trainingOrderNo"
-            placeholder="请输入护理员表id"
+          placeholder="请输入订单编号"
-            clearable
+          clearable
-            @keyup.enter.native="handleQuery"
+          @keyup.enter.native="handleQuery"
-          />
+        />
-        </el-form-item> -->
+      </el-form-item>
-        <el-form-item label="护理员姓名" prop="nursePersonName">
+      <el-form-item label="订单金额" prop="trainingOrderAmount">
-          <el-input
+        <el-input
-            v-model="queryParams.nursePersonName"
+          v-model="queryParams.trainingOrderAmount"
-            placeholder="请输入护理员姓名"
+          placeholder="请输入订单金额"
-            clearable
+          clearable
-            @keyup.enter.native="handleQuery"
+          @keyup.enter.native="handleQuery"
-          />
+        />
-        </el-form-item>
+      </el-form-item>
-        <el-form-item label="订单编号" prop="trainingOrderNo">
-          <el-input
-            v-model="queryParams.trainingOrderNo"
-            placeholder="请输入订单编号"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="订单金额" prop="trainingOrderAmount">
-          <el-input
-            v-model="queryParams.trainingOrderAmount"
-            placeholder="请输入订单金额"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
       <el-form-item label="订单状态" prop="trainingOrderStatus">
         <el-select
           v-model="queryParams.trainingOrderStatus"
@@ -62,22 +46,7 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <!-- <el-form-item label="下单方式，手机App：MOBILE_APP，微信小程序：WECHAT_APPLET，支付宝小程序：ALI_PAY_APPLET" prop="trainingOrderChannel">
+    
-          <el-input
-            v-model="queryParams.trainingOrderChannel"
-            placeholder="请输入下单方式，手机App：MOBILE_APP，微信小程序：WECHAT_APPLET，支付宝小程序：ALI_PAY_APPLET"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item> -->
-      <!-- <el-form-item label="下单时间，yyyy-MM-dd HH:mm:ss" prop="trainingOrderTime">
-          <el-date-picker clearable
-            v-model="queryParams.trainingOrderTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择下单时间，yyyy-MM-dd HH:mm:ss">
-          </el-date-picker>
-        </el-form-item> -->
       <el-form-item>
         <el-button
           type="primary"
@@ -93,52 +62,6 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <!-- <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:trainingOrder:add']"
-          >新增</el-button
-        >
-      </el-col> -->
-      <!-- <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:trainingOrder:edit']"
-          >修改</el-button
-        >
-      </el-col> -->
-      <!-- <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:trainingOrder:remove']"
-          >删除</el-button
-        >
-      </el-col> -->
-      <!-- <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:trainingOrder:export']"
-          >导出</el-button
-        >
-      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -224,11 +147,7 @@
         prop="trainingOrderTime"
         width="180"
       >
-        <!-- <template slot-scope="scope">
+       
-          <span>{{
-            parseTime(scope.row.trainingOrderTime, "{y}-{m}-{d}")
-          }}</span>
-        </template> -->
       </el-table-column>
       <el-table-column label="备注信息" align="center" prop="remark" />
       <el-table-column
@@ -253,22 +172,7 @@
             v-if="scope.row.trainingOrderStatus == 'PAY'"
             >退款</el-button
           >
-          <!-- <el-button
+        
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:trainingOrder:edit']"
-            >修改</el-button
-          > -->
-          <!-- <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:trainingOrder:remove']"
-            >删除</el-button
-          > -->
         </template>
       </el-table-column>
     </el-table>
@@ -361,58 +265,21 @@
         :inline="true"
       >
         <el-form-item label="护理员姓名" prop="nursePersonName">
-          <el-input
+          <div class="text">{{ form.nursePersonName }}</div>
-            v-model="form.nursePersonName"
-            style="width: 250px"
-            placeholder="请输入护理员姓名"
-          />
         </el-form-item>
         <el-form-item label="订单编号" prop="trainingOrderNo">
-          <el-input
+          <div class="text">{{ form.trainingOrderNo }}</div>
-            style="width: 250px"
-            v-model="form.trainingOrderNo"
-            placeholder="请输入订单编号"
-          />
         </el-form-item>
         <el-form-item label="订单金额" prop="trainingOrderAmount">
-          <el-input
+          <div class="text">{{ form.trainingOrderAmount }}</div>
-            style="width: 250px"
-            v-model="form.trainingOrderAmount"
-            placeholder="请输入订单金额"
-          />
         </el-form-item>
+
         <el-form-item label="下单方式" prop="trainingOrderChannel">
-          <el-select
+          <div class="text">{{ form.trainingOrderChannel }}</div>
-            style="width: 250px"
-            v-model="form.trainingOrderChannel"
-            placeholder="请选择下单方式"
-            clearable
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
         </el-form-item>
         <el-form-item label="下单时间" prop="trainingOrderTime">
-          <el-date-picker
+          <div class="text">{{ form.trainingOrderTime }}</div>
-            style="width: 250px"
-            clearable
-            v-model="form.trainingOrderTime"
-            type="datetime"
-            placeholder="请选择下单时间"
-          >
-          </el-date-picker>
         </el-form-item>
-        <!-- <el-form-item label="备注信息" prop="remark">
-          <el-input
-            v-model="form.remark"
-            style="width: 250px"
-            placeholder="请输入备注信息"
-          />
-        </el-form-item> -->
         <el-table
           :data="form.trainingOrderDetailsList"
           align="center"
@@ -420,24 +287,12 @@
         >
           <el-table-column
             prop="trainingItemTitle"
-            label="培训项目名称"
+            label="培训课程名称"
             align="center"
           ></el-table-column>
-          <el-table-column
-            prop="trainingItemDetails"
-            label="培训项目详情"
-            align="center"
-            :show-overflow-tooltip="true"
-          ></el-table-column>
-          <el-table-column
-            prop="trainingItemContent"
-            label="培训项目内容"
-            align="center"
-            :show-overflow-tooltip="true"
-          ></el-table-column>
           <el-table-column
             prop="trainingItemType"
-            label="项目类型"
+            label="课程类型"
             align="center"
           >
             <template slot-scope="scope">
@@ -480,63 +335,36 @@
             </template>
           </el-table-column>
         </el-table>
-
-        <!-- <el-form-item label="培训项目名称" prop="trainingItemTitle">
-            <el-input
-              style="width: 250px"
-              v-model="item.trainingItemTitle"
-              placeholder="请输入培训项目名称"
-            />
-          </el-form-item>
-          <el-form-item label="培训项目详情" prop="trainingItemDetails">
-            <el-input
-              type="textarea"
-              :rows="5"
-              style="width: 340px"
-              placeholder="请输入培训项目详情"
-              v-model="item.trainingItemDetails"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="培训项目内容" prop="trainingItemContent">
-            <el-input
-              type="textarea"
-              :rows="5"
-              style="width: 340px"
-              placeholder="请输入培训项目详情"
-              v-model="item.trainingItemContent"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="项目类型" prop="trainingItemType">
-            <el-select
-              style="width: 250px"
-              v-model="item.trainingItemType"
-              placeholder="请选择项目类型"
-              clearable
-            >
-              <el-option
-                v-for="item in trainingItemTypeoptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </el-form-item> -->
-        <!-- </div> -->
       </el-form>
-      <!-- <div slot="footer" class="dialog-footer">
+   
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div> -->
     </el-dialog>
-    <!-- 查看视频图片 -->
+    <!-- 查看图文 -->
     <el-dialog
-      title="查看视频图片"
+      title="查看图文"
       :visible.sync="innerrefundvideo"
       append-to-body
       width="1000px"
     >
-      <el-form :inline="true" :rules="rules" label-width="130px">
+      <el-form
-        <el-form-item label="培训课程海报图片" prop="trainingItemCoverUrl">
+        :inline="true"
+        :rules="rules"
+        label-width="130px"
+        :model="formlist"
+      >
+        <el-form-item label="培训课程详情" prop="trainingItemDetails">
+          <div class="textdetails">{{ formlist.trainingItemDetails }}</div>
+        </el-form-item>
+        <el-form-item label="培训课程内容" prop="trainingItemContent">
+          <editor
+            @imgs="imgs"
+            :url="'/common/uploadTrainingItemContentUrl'"
+            v-model="formlist.trainingItemContent"
+            :min-height="150"
+            style="width:600px"
+          />
+          <!-- <div class="textdetail">{{ formlist.trainingItemContent }}</div> -->
+        </el-form-item>
+        <el-form-item label="培训课程封面图片" prop="trainingItemCoverUrl">
           <img class="img" :src="baseurl + formlist.trainingItemCoverUrl" alt />
         </el-form-item>
         <el-form-item label="培训课程海报图片" prop="trainingItemPosterUrl">
@@ -546,17 +374,47 @@
             alt
           />
         </el-form-item>
-        <el-form-item label="视频" prop="itemDirectoryUrl">
+
-          <video
+        <el-table
-            class="img"
+          ref="list"
-            v-for="(item, index) in list"
+          style="margin-top: 20px; width: 1250px"
-            :key="index"
+          :data="formlist.list"
-            :src="baseurl + item.itemDirectoryUrl"
+        >
-            controls="controls"
+          <el-table-column label="章节视频" align="center" width="300">
-          >
+            <template slot-scope="scope">
-            您的浏览器不支持视频播放
+              <!-- <stationAcatar
-          </video>
+                @imgUrl="imgUrl4"
-        </el-form-item>
+                @item="itemDirectoryUrl"
+                :tovideo="scope.row.itemDirectoryUrl"
+                :type="'itemDirectoryUrl'"
+                :item="scope.row"
+              /> -->
+              <video
+                  class="img"
+                  :src="baseurl + scope.row.itemDirectoryUrl"
+                  controls="controls"
+                >
+                </video>
+            </template>
+          </el-table-column>
+          <el-table-column label="章节名称" align="center">
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.itemDirectoryName"
+                placeholder="请输入章节名称"
+              ></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="章节标题" align="center">
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.itemDirectoryTitle"
+                placeholder="请输入章节标题"
+              ></el-input>
+            </template>
+          </el-table-column>
+         
+        </el-table>
       </el-form>
     </el-dialog>
   </div>
@@ -574,8 +432,12 @@ import {
   updateTrainingOrder,
 } from "@/api/system/trainingOrder";
 import baseurl from "@/api/baseurl.js";
+import stationAcatar from "../stationAvatar/index.vue";
+import editor from "@/components/Editor";
+
 export default {
   name: "TrainingOrder",
+  components: { stationAcatar, editor },
   data() {
     return {
       baseurl: null,
@@ -606,7 +468,7 @@ export default {
       innerrefund: false,
       innerrefundvideo: false,
       query: {},
-      formlist: [],
+      formlist: {},
       trainingItemTypeoptions: [
         {
           value: "GRAPHIC_LEARNING",
@@ -687,6 +549,25 @@ export default {
     this.baseurl = baseurl;
   },
   methods: {
+    // 章节视频
+    itemDirectoryUrl(item) {
+      let items = JSON.parse(item);
+      console.log(items);
+      if (items.idd && !items.trainingItemDirectoryId) {
+        this.form.trainingItemDirectoryList.forEach((e) => {
+          if (e.idd == items.idd) {
+            e.itemDirectoryUrl = items.itemDirectoryUrl;
+          }
+        });
+      } else if (!items.idd && items.attributeDetailsId) {
+        this.form.trainingItemDirectoryList.forEach((e) => {
+          if (e.attributeDetailsId == items.attributeDetailsId) {
+            e.itemDirectoryUrl = items.itemDirectoryUrl;
+          }
+        });
+      }
+    },
+    imgUrl4(imgUrl) {},
     // 取消按钮
     cencelbtn() {
       this.innerrefund = false;
@@ -699,6 +580,10 @@ export default {
         this.innerrefund = true;
       });
     },
+    imgs(item) {
+      console.log(item);
+      this.imgsurl.pictureUrlList.push(item);
+    },
     //退款确定按钮
     ordercacenl() {
       var obj = {
@@ -732,10 +617,14 @@ export default {
     handlelook(row) {
       this.innerrefundvideo = true;
       console.log(row);
+
       this.formlist.trainingItemCoverUrl = row.trainingItemCoverUrl;
       this.formlist.trainingItemPosterUrl = row.trainingItemPosterUrl;
+      this.formlist.trainingItemDetails = row.trainingItemDetails;
+      this.formlist.trainingItemContent = row.trainingItemContent;
+
       orderItemDirectory(row.trainingOrderDetailsId).then((response) => {
-        this.list = response.rows;
+        this.formlist.list = response.rows;
       });
     },
 
@@ -790,6 +679,16 @@ export default {
         this.form = response.data;
         this.form.trainingOrderDetailsList =
           response.data.trainingOrderDetailsList;
+        response.data.trainingOrderChannel == "WECHAT_APPLET"
+          ? (response.data.trainingOrderChannel = "微信小程序")
+          : "";
+        response.data.trainingOrderChannel == "MOBILE_APP"
+          ? (response.data.trainingOrderChannel = "手机App")
+          : "";
+        response.data.trainingOrderChannel == "ALI_PAY_APPLET"
+          ? (response.data.trainingOrderChannel = "支付宝小程序")
+          : "";
+
         this.open = true;
         this.title = "查看学习培训订单";
       });
@@ -847,4 +746,43 @@ export default {
   height: 150px;
   margin-left: 10px;
 }
+.text {
+  width: 250px;
+  height: 36px;
+  line-height: 36px;
+  padding-left: 15px;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 0 15px;
+  border: 1px solid #e6ebf5;
+}
+.textdetail {
+  width: 550px;
+  // height: 600px;
+  line-height: 36px;
+  padding-left: 15px;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 0 15px;
+  border: 1px solid #e6ebf5;
+}
+.textdetails {
+  width: 600px;
+  // height: 300px;
+  line-height: 36px;
+  padding-left: 15px;
+  font-size: 14px;
+  border-radius: 4px;
+  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%);
+}
 </style>