视频配置模块

package.json

@@ -31,6 +31,7 @@
     "vue-axios": "^2.1.2",
     "vue-click-outside": "^1.1.0",
     "vue-i18n": "^8.7.0",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.1.1"
   },

src/components/form-test/index.vue

@@ -139,14 +139,16 @@
               class="upload-demo"
               action="/api/service-file/uploadFile"
               :on-preview="handlePreview"
-              :on-remove="handleRemove"
+              :on-remove="(file, fileList)=>handleRemove(file, fileList,key)"
               :before-remove="beforeRemove"
               :limit="6"
               :on-exceed="handleExceed"
               :headers="uploadHeader"
               :on-success="(response, file, fileList)=>uploadSuccess(response, file, fileList,key)"
+              :before-upload="(file)=>beforeAvatarUpload(file,value.accept)"
               v-model="insideData[key]"
-              :file-list="fileList">
+              :accept="value.accept"
+              :file-list="insideData[key]">
               <el-button size="small" type="primary">点击上传</el-button>
               <div slot="tip" v-if="value.tip" class="el-upload__tip">{{value.tip}}</div>
             </el-upload>
@@ -155,6 +157,8 @@
               v-model="insideData[key]"
               v-else-if="value.type === 'cascader'"
               :options="value.data"
+              :emitPath="false"
+              :props="value.props || {}"
               ></el-cascader>
             <!--
              插槽:
@@ -165,6 +169,11 @@
                      {{ 'demo' }}
                   </template>
             -->
+            <quill-editor
+              ref="myQuillEditor"
+              v-model="insideData[key]"
+              v-else-if="value.type === 'editor'"
+            />
             <slot v-else :name="key" />
             
           </div>
@@ -209,8 +218,15 @@
 </template>
 
 <script>
-  import { getToken } from "@/util/auth";
+import { getToken } from "@/util/auth";
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+import { quillEditor } from 'vue-quill-editor'
 export default {
+  components:{
+    quillEditor
+  },
   name: 'test',
   props: {
     // 表单值
@@ -287,18 +303,38 @@ export default {
     },
   },
   methods: {
+    beforeAvatarUpload(file,accept) {
+      console.log(file,accept)
+      const videoType = file.type.substring(file.type.length - 3)
+      if(accept.indexOf(videoType) == -1){
+        this.$message.error('上传头像图片只能是 '+ accept +' 格式!');
+        return false
+      }
+    },
     uploadSuccess(response, file, fileList,key){
       this.insideData[key] = []
       for (let i = 0; i < fileList.length; i++) {
         const element = fileList[i];
-        this.insideData[key].push(element.response.data)
+        
+        console.log(element)
+        if(element.response){
+          element.response.data.name = element.response.data.fileName
+          this.insideData[key].push(element.response.data)
+        }else{
+          this.insideData[key].push(element)
+        }
       }
     },
-    handleRemove(file, fileList) {
+    handleRemove(file, fileList,key) {
       this.insideData[key] = []
       for (let i = 0; i < fileList.length; i++) {
         const element = fileList[i];
-        this.insideData[key].push(element.response.data)
+        if(element.response){
+          element.response.data.name = element.response.data.fileName
+          this.insideData[key].push(element.response.data)
+        }else{
+          this.insideData[key].push(element)
+        }
       }
     },
     handlePreview(file) {
@@ -353,6 +389,9 @@ export default {
           case 'uploads':
             this.uploadsHandel(key, value)
             break
+            case 'cascader':
+            this.cascaderHandel(key, value)
+            break
         }
       }
     },
@@ -394,6 +433,21 @@ export default {
       this.setData(key, value)
     },
 
+    // el-checkbox标签处理
+    cascaderHandel(key, value) {
+      // 默认值
+      if (!this.insideData[key]) {
+        this.$set(this.insideData, key, [])
+      }
+      
+      this.insideConfig[key].props = value.props || {}    
+      if(this.insideConfig[key].props && !this.insideConfig[key].props.emitPath)
+      this.insideConfig[key].props.emitPath = false
+      this.setData(key, value)
+    },
+
+    
+
     // el-datePicker标签处理
     datePickerHandel(key, value) {
       this.insideConfig[key].placeholder = value.placeholder || '请选择日期'
@@ -413,6 +467,8 @@ export default {
     // 多文件上传处理
     uploadsHandel(key, value) {
       this.insideConfig[key].maxSelectNum = value.maxSelectNum || 6
+      this.insideConfig[key].accept = value.accept || null
+      
       if (!this.insideData[key]) {
         this.$set(this.insideData, key, [])
       }

src/views/management/video-setting/index.vue

@@ -1,41 +1,40 @@
   <template>
     <div class="video-setting">
       <el-row :gutter="8">
-        <el-col :span="8">
+        <el-col :span="6">
           <tree @treeClick="reload"></tree>
         </el-col>
-        <el-col :span="16">
+        <el-col :span="18">
           <el-card class="box-card">
             <test ref="req" v-model="req" :form-config="queryForm"></test>
-        
             <el-table :data="tableList" v-loading="loading">
-              <el-table-column :label="$t('management.video_setting.videoUrl')" align="center" prop="videoUrl" />
+              <!-- <el-table-column :label="$t('management.video_setting.videoUrl')" align="center" prop="videoUrl" /> -->
               <el-table-column :label="$t('management.video_setting.title')" align="center" prop="title" />
               <el-table-column :label="$t('management.video_setting.status')" align="center" prop="status" />
               <el-table-column :label="$t('management.video_setting.duration')" align="center" prop="duration" width="120" />
               <el-table-column :label="$t('management.video_setting.size')" align="center" prop="size" width="120" />
-              <el-table-column :label="$t('create_time')" align="center" prop="create_time" />
-              <el-table-column :label="$t('update_time')" align="center" prop="update_time" width="120" />
-              <el-table-column :label="$t('operation')" align="center" width="80">
+              <el-table-column :label="$t('create_time')" align="center" prop="createTime" />
+              <el-table-column :label="$t('update_time')" align="center" prop="updateTime" width="120" />
+              <el-table-column :label="$t('operation')" align="center" width="200">
                 <template slot-scope="scope">
+                  <!-- <el-button type="text" @click="toView(scope.row)">{{ $t('toView') }} </el-button> -->
+                  <el-button type="text" @click="handleUpdate(scope.row)">{{ $t('edit') }} </el-button>
                   <el-button type="text" @click="handleDelete(scope.row)">{{ $t('delete') }} </el-button>
                 </template>
               </el-table-column>
             </el-table>
-        
             <pagination v-show="total > 0" :total="total" :page.sync="req.pageNum" :limit.sync="req.pageSize" @pagination="getList" />
-        
             <el-dialog title="添加设备" :visible.sync="open" width="30%">
               <test ref="form" v-model="dialogParams" :form-config="dialogForm" :insideRules="dialogRules"></test>
             </el-dialog>
+            <el-dialog title="预览" :visible.sync="viewModal" width="500px">
+              
+            </el-dialog>
           </el-card>
         </el-col>
       </el-row>
-      
     </div>
-    
   </template>
-  
   <script>
   import * as API from '@/api/management/video-setting.js'
   import * as APISelect from '@/api/Internet-of-things/select.js'
@@ -46,7 +45,7 @@
     components: { test,tree },
     data() {
       return {
-        
+        viewModal:false,
         req: {
           pageNum: 1,
           pageSize: 10,
@@ -60,27 +59,6 @@
             label: this.$t('management.video_setting.keyword'),
             span: 4,
           },
-          // classifyId: {
-          //   span: 4,
-          //   label: this.$t('management.video_setting.type'),
-          //   type: 'select',
-          //   data: [
-          //     {
-          //       label: this.$t(
-          //         'management.video_setting.treeAddType1'
-          //       ),
-          //       type: 1,
-          //     },
-          //     {
-          //       label: this.$t(
-          //         'management.video_setting.treeAddType2'
-          //       ),
-          //       type: 2,
-          //     },
-          //   ],
-          //   keyName: 'type',
-          //   labelName: 'label',
-          // },
           operation: {
             // 搜索按钮操作
             query: () => {
@@ -119,19 +97,30 @@
         },
         dialogForm: {
           loadingStatus: false,
+          title: {
+            label: '标题',
+            span: 1
+          },
           fileInfoList: {
-            label: this.$t('m'),
+            label: this.$t('分组名称'),
             type: 'uploads',
             data: [],
-            tip:"最多选择6个视频文件"
-          },
+            tip:"最多选择6个视频文件",
+            accept:".avi,.wmv,.mkv,.mp4,.mov",
+            fileList:[],
+          }, 
           videoClassifyId: {
             label: this.$t('分组名称'),
             type: 'cascader',
+            props:{
+              label:"name",
+              value: 'id',
+            },
             data: [],
-            setData() {
-              return API.videoClassifyTree({})
-            }
+          },
+          richText:{
+            label: this.$t('图文说明书'),
+            type: 'editor',
           },
           
           otherButton: {
@@ -150,6 +139,7 @@
                 methodsText: 'submit',
                 type: 'primary',
                 submit: () => {
+                  console.log(this.dialogParams)
                   this.handleSubmit()
                 },
               },
@@ -157,12 +147,13 @@
           },
         },
         dialogRules: {
-          tdaApplicationId: [{ required: true, message: this.$t('management.video_setting.tdaApplicationIdRules'), trigger: 'change' }],
-          tdaProductId: [{ required: true, message: this.$t('management.video_setting.tdaProductIdRules'), trigger: 'change' }],
-          deviceName: [{ required: true, message: this.$t('management.video_setting.deviceNameRules'), trigger: 'blur' }],
-          nodeId: [{ required: true, message: this.$t('management.video_setting.nodeIdRules'), trigger: 'blur' }],
-          secret: [{ required: true, message: this.$t('management.video_setting.secretRules'), trigger: 'blur' }],
+          title: [{ required: true, message: this.$t('management.video_setting.deviceNameRules'), trigger: 'blur' }],
+          fileInfoList: [{ required: true, message: this.$t('management.video_setting.tdaApplicationIdRules'), trigger: 'change' }],
+          videoClassifyId: [{ required: true, message: this.$t('management.video_setting.tdaProductIdRules'), trigger: 'change' }],
+          richText: [{ required: true, message: this.$t('management.video_setting.deviceNameRules'), trigger: 'blur' }],
         },
+        modalType:'Add',
+        
       }
     },
     created() {
@@ -170,25 +161,55 @@
     },
     mounted() {
       this.getList()
-      //this.getTree()
+      this.getTree()
     },
     watch: {
       
     },
     methods: {
+      toView(e){
+        console.log(e)
+        const v = this
+      },
+      handleUpdate(row){
+        const v = this
+        API.videoInfoDetails({id:row.id}).then(
+          (res) => {
+            for (let i = 0; i < res.data.data.fileInfoList.length; i++) {
+              const element = res.data.data.fileInfoList[i];
+              element.name = element.fileName
+            }
+           this.dialogParams = res.data.data
+           v.modalType = 'Edit'
+           this.open = true
+          },
+          (err) => {
+            console.log('tdaDevicePage: ' + err)
+          }
+        )
+      },
       getTree() {
 			  this.loading = true
         API.videoClassifyTree(this.treeQuery).then(
           (res) => {
-            console.log(res)
+            //this.dataInit(res.data.data)
             this.dialogForm.videoClassifyId.data = res.data.data
-            console.log(this.dialogForm)
           },
           (err) => {
             console.log('tdaDevicePage: ' + err)
           }
         )
       },
+      dataInit(_data){
+        for (let i = 0; i < _data.length; i++) {
+          const element = _data[i];
+          element.label = element.name
+          element.value = element.id
+          if(element.children && element.children.length != 0){
+            this.dataInit(element.children)
+          }
+        }
+      },
       reload(row){
         console.log(row)
         this.req.pageNum = 1
@@ -210,12 +231,13 @@
         )
       },
       handleSubmit() {
-        this.$refs.test.$refs['form'].validate((valid) => {
+        const v = this
+        this.$refs.form.$refs['form'].validate((valid) => {
           if (valid) {
             this.dialogForm.loadingStatus = true
-            API.videoInfoAdd(this.dialogParams).then(
+            API['videoInfo' + v.modalType](this.dialogParams).then(
               () => {
-                this.msgSuccess(this.$t('addSuccess'))
+                this.msgSuccess(this.$t(v.modalType == 'Add' ? 'addSuccess' : 'editSuccess'))
                 this.$refs.form.reset()
                 this.open = false
                 this.dialogForm.loadingStatus = false

src/views/wel/index.vue

@@ -4,6 +4,7 @@
       <el-col :span="24">
         <third-register></third-register>
       </el-col>
+      <div style="white-space: pre-wrap;" v-html="html"></div>
     </el-row>
     <el-row>
       <el-col :span="24">
@@ -668,6 +669,7 @@
       return {
         activeNames: ['1', '2', '3', '5'],
         logActiveNames: ['24'],
+        html:"<p>12312312312\r\n123123123</p>"
       };
     },
     computed: {