From a5b5d2a24b846196d0561d1fffd8497c1db17ebe Mon Sep 17 00:00:00 2001
From: "@fawn-nine" <1271023382@qq.com>
Date: Fri, 20 Oct 2023 17:44:23 +0800
Subject: [PATCH] .

---
 .../modules/book/talkBook-add-or-update.vue   | 439 ++++++++++++++++++
 src/views/modules/book/talkBook.vue           | 213 +++++++++
 static/config/index.js                        |   4 +-
 3 files changed, 654 insertions(+), 2 deletions(-)
 create mode 100644 src/views/modules/book/talkBook-add-or-update.vue
 create mode 100644 src/views/modules/book/talkBook.vue

diff --git a/src/views/modules/book/talkBook-add-or-update.vue b/src/views/modules/book/talkBook-add-or-update.vue
new file mode 100644
index 0000000..d9766be
--- /dev/null
+++ b/src/views/modules/book/talkBook-add-or-update.vue
@@ -0,0 +1,439 @@
+<template>
+  <el-dialog :title="!dataForm.productId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
+    @close="handlereset" lock-scroll width="750px">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
+      <!-- <el-form-item label="所属分类" prop="poids">
+        <el-cascader v-model="dataForm.poids" :options="categorys" :props="props" clearable></el-cascader>
+      </el-form-item> -->
+      <!-- <el-form-item label="商品类型" prop="goodsType">
+        <el-select v-model="dataForm.goodsType" placeholder="请选择">
+          <el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue" :value="item.dictType">
+          </el-option>
+        </el-select>
+      </el-form-item> -->
+      <!-- 关联的图书ids --> 
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="dataForm.title" placeholder="请输入讲书标题"></el-input>
+      </el-form-item>
+      <el-form-item label="讲书章节" prop="chapter" :required="true">
+        <el-input style="width: 150px;" v-model.number="dataForm.chapter"  @input="numberChange" placeholder="请输入章节序号" type="number" min="1"></el-input>
+        <br/><span style="color: #999;">请输入大于0的整数,且为必填项</span>
+      </el-form-item>     
+      <el-form-item label="音频" >
+        <el-upload :limit="1" class="el-uploadvideo " v-loading="loading" element-loading-text="正在保存到服务器，请勿离开..." element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+          :class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"          
+          :action="baseUrl + '/oss/fileoss'"
+          :file-list="voiceList" :on-success="videohandlePicSuccess" accept=".mp3" :on-remove="videohandleRemove"
+          :show-file-list="true"
+          :on-progress="uploadVideoProcess">
+           <!-- <i class="el-icon-plus"></i>  -->
+          <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
+        </el-upload>
+        <el-progress v-show="progressFlag" :percentage="loadProgress"></el-progress>
+        <div>  
+          <audio id="resource" :src="dataForm.voices" controls  v-show='true'></audio> 
+        </div>
+      </el-form-item>
+
+      <el-form-item label="内容" prop="content">
+        <quill-editor v-model="dataForm.content" ref="myQuillEditor" :options="editorOption"
+          @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" 
+          @ready="onEditorReady($event)" class="shangpin_editor">
+        </quill-editor>        
+      </el-form-item>
+      <!-- <el-form-item label="排序" prop="sort">
+        <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
+      </el-form-item> -->
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handlereset">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()" :disabled="loading">确定</el-button>
+    </span>
+  </el-dialog>  
+</template>
+
+<script>
+  import {
+    quillEditor
+  } from 'vue-quill-editor'
+  import global from '../../common/common.vue' //引入共用组间
+
+  import 'quill/dist/quill.core.css'
+  import 'quill/dist/quill.snow.css'
+  import 'quill/dist/quill.bubble.css'
+
+  export default {
+  data() {
+    // 自定义校验规则
+      var checkMoney = (rule, value, callback) => {       
+        if (!value) {
+          return callback(new Error('章节序号不能为空,且必须大于0'));
+        }
+        // setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('请输入数字值'));
+          } else {
+            if (value <= 0) {
+              callback(new Error('章节序号必须要大于0'));
+            }else {
+              callback();
+            }
+          }
+        // }, 100);
+      };
+      return { 
+        loading: false,      
+        progressFlag: false, 
+        loadProgress: 0,
+        baseUrl: global.baseUrl,        
+        visible: false,
+        categorys: [],
+        fileList: [], // 封面图
+        swiperfileList: [],
+        dialogVisible: false,
+        props: {
+          value: "catId",
+          label: "name",
+          children: "children",
+          checkStrictly: true
+        },
+        dataForm: {         
+          productId: 0,
+          talkid:null,
+          limitCountImg: 1, // 图片数量  
+          title: '',          
+          productPid: '',  
+          voices: '',         
+          chapter: null,
+          content:''         
+        },
+        voiceList:[],
+        dataRule: {
+          title: [{
+            required: true,
+            message: '书评标题不能为空',
+            trigger: 'blur'
+          }],          
+         
+          chapter: [{
+            validator: checkMoney, 
+            trigger: 'blur'
+          }],
+          
+        },
+       
+
+        // 富文本编辑器配置
+        editorOption: {
+          modules: {
+            toolbar: [
+              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+              ['blockquote', 'code-block'], // 引用  代码块
+              [{
+                header: 1
+              }, {
+                header: 2
+              }], // 1、2 级标题
+              [{
+                list: 'ordered'
+              }, {
+                list: 'bullet'
+              }], // 有序、无序列表
+              [{
+                script: 'sub'
+              }, {
+                script: 'super'
+              }], // 上标/下标
+              [{
+                indent: '-1'
+              }, {
+                indent: '+1'
+              }], // 缩进
+              [{
+                direction: 'rtl'
+              }], // 文本方向
+              [{
+                size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
+              }], // 字体大小
+              [{
+                header: [1, 2, 3, 4, 5, 6]
+              }], // 标题
+              [{
+                color: []
+              }, {
+                background: []
+              }], // 字体颜色、字体背景颜色
+              // [{ font: ['songti'] }], // 字体种类
+              [{
+                align: []
+              }], // 对齐方式
+              ['clean'], // 清除文本格式
+              ['image', 'video'] // 链接、图片、视频
+            ]
+          },
+          placeholder: '请输入正文'
+        },
+      }
+    },
+    created() {
+      
+    },
+  methods: {    
+    init(id,bookid) {
+      this.productPid = bookid
+        this.dataForm.talkid = id || null
+        console.log(id,this.productPid,'this.productPid')
+        this.dataForm.productId = bookid || 0
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()          
+          if (this.dataForm.talkid) {
+            this.$http({
+              url: this.$http.adornUrl(`/book/teach/getTeachDetail`),
+              method: 'get',
+              params: this.$http.adornParams({
+                'teachId': id
+              })
+            }).then(({
+              data
+            }) => {
+              console.log(data, 666)
+              if (data && data.code === 0) {
+                this.dataForm.title = data.bookTeach.title
+                this.dataForm.voices = data.bookTeach.voices
+                this.dataForm.content = data.bookTeach.content
+                this.dataForm.chapter = data.bookTeach.chapter
+                if (this.dataForm.voices != '') {
+                  this.voiceList.push({
+                    name: data.bookTeach.title,
+                    url: data.bookTeach.voices
+                  })
+                }
+                // else {                
+                // console.log(data.bookBuyConfig.productImageList)
+                // let arr = []
+                //  let arr1 = []
+
+                //   arr = data.bookBuyConfig.productImageList.split(',');
+                //   console.log(arr)
+                //   arr.forEach((item, index) => {
+                //     arr1.push({
+                //       name: index,
+                //       url: item
+                //     })
+                //   });
+                //   this.swiperfileList = arr1
+                // }
+
+              }
+            })
+          } else { 
+            console.log('为新增数据')
+          }
+        })
+      },
+    numberChange() { 
+      console.log('改变了input值')
+
+    },
+      dealImgChange(file, fileList) {
+        this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+      },
+      // 表单提交
+    dataFormSubmit() {      
+     // console.log('userid', this.$store.state.user.id)        
+        this.$refs['dataForm'].validate((valid) => {    
+          if (valid && this.dataForm.chapter > 0) {
+            this.$http({
+              url: this.$http.adornUrl(`/book/teach/${!this.dataForm.talkid ? 'addTeach1' : 'updateTeach'}`),
+              method: 'post', 
+              data: this.$http.adornData({
+                'bookId': parseInt(this.productPid),
+                'chapter': this.dataForm.chapter,
+                'title': this.dataForm.title,
+                'voices': this.dataForm.voices,
+                'content': this.dataForm.content,
+                // 'video': "https://ehh-private-01.oss-cn-beijing.aliyuncs.com…3/08/28/91fd5a4c35c34763abca5d2929637164movie.mp4",
+                'teachId': this.dataForm.talkid || undefined,
+              })
+            }).then(({
+              data
+            }) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false
+                    this.dataForm.productDetails = ''
+                    this.dataForm.video = ''
+                    this.voiceList = []
+                    this.$refs['dataForm'].resetFields()
+                    // this.$refs['dataForm'].reset()
+                    this.$emit('refreshDataList')
+                  }
+                })
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+          } else { 
+            this.$message.error('章节序号必须大于0!')
+          }
+        })
+      },
+      changeTime(e) {
+        console.log(e)
+    },    
+  
+      handlePictureCardPreview(file) {
+        this.dataForm.productImages = file.url;
+        this.dialogVisible = true;
+      },     
+      // 字符串图片地址
+      getStringImgUrl() {
+        let arr = this.swiperfileList.map(item => item.url)
+        if (arr.length <= 0) {
+          return null
+        } else {
+          return arr.toString()
+        }
+      },
+      handlePicSuccess(res, file) {
+        // console.log(res,'res')
+        if (res.msg == "success") {
+         // this.dataForm.productImages = res.url;
+          this.fileList.push({
+            name: file.name,
+            url: res.url
+          })
+          this.dataForm.voices = res.url
+          console.log(this.dataForm.voices,'voices')
+          this.$message.success("上传成功");
+        } else {
+          this.$message.error("上传失败");
+        }
+      },
+      uploadVideoProcess(event, file, fileList) {
+          this.progressFlag = true; // 显示进度条
+          this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
+          console.log('this.loadProgress',this.loadProgress)
+          if (this.loadProgress >= 100) {
+              this.loadProgress = 99
+              this.loading = true
+              // setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
+          }
+      },
+
+    videohandlePicSuccess(res, file) {
+        console.log(res,'res')
+        if (res.msg == "success") {
+          // this.dataForm.productImages = res.url;
+          this.voiceList.push({
+            name: file.name,
+            url: res.url
+          })
+          this.dataForm.voices = res.url
+          // console.log(this.dataForm.productImages,'productImages')
+          this.loadProgress = 100          
+          setTimeout(() => { this.progressFlag = false; this.loading = false; this.$message.success("上传成功");}, 1000) // 一秒后关闭进度条
+        } else {
+          this.$message.error("上传失败");
+        }
+      },
+      
+      handleRemove(file, fileList) {
+        this.dataForm.productImages = '';
+        this.fileList = fileList
+        this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+    },
+    videohandleRemove(file, fileList) {
+        this.dataForm.voices = '';
+        this.voiceList = fileList
+        
+    },
+      handlereset() {
+        this.fileList = [],
+          this.voiceList = [] // 清空视频列表
+        this.dataForm.voices = ''
+          this.visible = false
+        this.swiperfileList = []
+        this.$refs['dataForm'].resetFields()
+        this.dataForm.productDetails = ''
+        this.progressFlag = false
+        this.loading = false
+        // this.$refs['dataForm'].reset()
+      },
+      // 失去焦点事件
+      onEditorBlur(quill) {
+       console.log('editor blur!', quill)       
+      },
+      // 获得焦点事件
+      onEditorFocus(quill) {
+        //console.log('editor focus!', quill)
+      },
+      // 准备富文本编辑器
+      onEditorReady(quill) {
+       // console.log('editor ready!', quill)
+      },
+      
+    },
+    components: {
+      quillEditor
+  },
+  mounted() {
+    this.$bus.$on("haveBookIds", (data) => {  
+      // console.log('haveBookIds', data)              
+        data.bookIds.length > 0 ? this.dataForm.Books = data.bookIds : this.dataForm.Books = []
+      });
+  },
+
+    watch: {
+      visible: {
+        handler(val, oldVal) {
+          // this.getGoodsTypeList()
+        },
+        deep: true
+      },
+    }
+  }
+</script>
+
+<style lang="less">
+/deep/ .el-uploadvideo .el-upload-list li{height: auto !important;}
+  // .disUoloadSty {
+  //   .el-upload--picture-card {
+  //     display: none;
+  //     /* 上传按钮隐藏 */
+  //   }
+  // }
+
+  // .el-form-item {
+  //   /deep/ .el-form-item__label {
+  //     font-size: 12px;
+  //   }
+  // }
+  .el-uploadvideo{
+    .el-progress {
+      display: none !important; 
+    }
+  }
+  .el-uploadfeng {
+   .el-upload-list__item {
+      width: 120px;
+      height: 120px;
+    }
+
+    .el-upload--picture-card {
+      width: 120px;
+      height: 120px;
+      line-height: 120px;
+    }
+  }
+
+  .shangpin_editor .ql-editor {
+    height: 150px;
+  }
+</style>
diff --git a/src/views/modules/book/talkBook.vue b/src/views/modules/book/talkBook.vue
new file mode 100644
index 0000000..170703b
--- /dev/null
+++ b/src/views/modules/book/talkBook.vue
@@ -0,0 +1,213 @@
+<template>
+    <div class="mod-config">      
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">       
+        <el-form-item>
+          <!-- <el-button @click="getDataList()">查询</el-button> -->
+          <el-button v-if="isAuth('book:bookchapter:save')" type="primary" @click="addOrUpdateHandle()">增加讲书目录</el-button>
+          <!-- <el-button v-if="isAuth('book:bookchapter:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
+          <!-- <router-link :to="{path: 'book-book' , query:{  upPageIndex } }">
+            <el-button type="primary">返回上一级</el-button>
+          </router-link> -->
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        @selection-change="selectionChangeHandle"       
+        style="width: 100%;">
+        
+        <el-table-column width="100"
+          prop="chapter"         
+          align="center"
+          label="章节序号">
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          label="标题">
+        </el-table-column>        
+        <el-table-column
+          prop="content"
+          header-align="center"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="内容">
+        </el-table-column>
+        <el-table-column width="400"
+          prop="voices"
+          header-align="center"
+          align="center"
+          label="音频">
+          <template slot-scope="scope">
+            <span v-if="scope.row.voices == ''">暂未上传音频</span>
+            <audio v-else id="resource" :src="scope.row.voices" controls  v-show='true' style="width: 350px;"></audio> 
+          </template>
+        </el-table-column>       
+        <!-- <el-table-column
+          prop="createTime"
+          header-align="center"
+          align="center"
+          label="时间">
+        </el-table-column> -->
+        <!-- <el-table-column
+          prop="sort"
+          header-align="center"
+          align="center"
+          label="排序">
+        </el-table-column>
+        <el-table-column
+          prop="delFlag"
+          header-align="center"
+          align="center"
+          label="">
+        </el-table-column> -->
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">          
+            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.teachId)">修改</el-button>
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.teachId)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </template>
+  
+  <script>
+    import AddOrUpdate from './talkBook-add-or-update'
+    export default {
+      data () {
+        return {
+          dataForm: {
+            key: ''
+          },
+          dataList: [1],
+          bookid:0,
+          upPageIndex:0,
+          pageIndex: 1,
+          pageSize: 10,
+          totalPage: 0,
+          dataListLoading: false,
+          dataListSelections: [],
+          addOrUpdateVisible: false
+        }
+      },
+      components: {
+        AddOrUpdate
+      },
+      activated () {
+        this.bookid = this.$route.query.id;
+        if(this.$route.query.upPageInde != null){
+            this.pageIndex = this.$route.query.upPageIndex;
+            console.log(this.pageIndex)
+        }
+        this.upPageIndex = this.$route.query.pageIndex;
+        console.log(this.bookid)
+        this.getDataList()
+      },
+      methods: {
+        // 获取数据列表
+        getDataList () {
+          this.dataListLoading = true
+          this.$http({
+            // url: this.$http.adornUrl('/forum/articles/list'),
+            url: this.$http.adornUrl('/book/teach/getBookTeachItems'),
+            method: 'get',
+            params: this.$http.adornParams({
+              'page': this.pageIndex,
+              'limit': this.pageSize,
+              //'key': this.dataForm.key,
+              'bookId' : this.bookid
+            })
+            // data: {
+            //   'page': this.pageIndex,
+            //    'limit': this.pageSize,
+            // //   //'key': this.dataForm.key,
+            //    'bookid' : this.bookid
+            // }
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              console.log(data,'data')
+              this.dataList = data.page.records
+              this.totalPage = data.page.total
+            } else {
+              this.dataList = []
+              this.totalPage = 0
+            }
+            this.dataListLoading = false
+          })
+        },
+        // 每页数
+        sizeChangeHandle (val) {
+          this.pageSize = val
+          this.pageIndex = 1
+          this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle (val) {
+          this.pageIndex = val
+          this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle (val) {
+          this.dataListSelections = val
+        },
+        // 新增 / 修改
+        addOrUpdateHandle (id) {
+          this.addOrUpdateVisible = true
+          this.$nextTick(() => {          
+            this.$refs.addOrUpdate.init(id, this.bookid)
+          })
+        },
+        // 删除
+        deleteHandle (id) {
+          // var ids = id ? [id] : this.dataListSelections.map(item => {
+          //   return item.id
+          // })
+          this.$confirm(`确定对[id=${id}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.$http({
+              url: this.$http.adornUrl('/book/teach/delTeach'),
+              method: 'post',              
+              // data: this.$http.adornData(ids, false)
+              //  data: {'teachId': id}
+                data: this.$http.adornData({
+                  'teachId': id
+                })
+            }).then(({data}) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.getDataList()
+                  }
+                })
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+          })
+        }
+      }
+    }
+  </script>
+  
\ No newline at end of file
diff --git a/static/config/index.js b/static/config/index.js
index dc5c9f1..1498d37 100644
--- a/static/config/index.js
+++ b/static/config/index.js
@@ -7,9 +7,9 @@
   // api接口请求地址
   // window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';
   // window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
-  window.SITE_CONFIG['baseUrl'] = 'https://testapi.nuttyreading.com';         // 线上测试环境
+  // window.SITE_CONFIG['baseUrl'] = 'https://testapi.nuttyreading.com';         // 线上测试环境
   // window.SITE_CONFIG['baseUrl'] = 'https://api.nuttyreading.com';         // 线上正式环境
-  // window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.38:9200/pb';
+  window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.38:9200/pb';
   // window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
 
   // cdn地址 = 域名 + 版本号