配置修改上测试

src/components/Pagination/index.vue

@@ -91,13 +91,16 @@ export default {
 .pagination-container {
   background: #fff;
   padding: 32px 16px;
+  position: relative;
+  height: 32px;
 }
 .pagination-container.hidden {
   display: none;
 }
 /deep/ .el-pagination {
-  left: 40%;
-  position: relative;
+  right: 0;
+  position: absolute;
+  height: 32px;
   // margin-left: -400px;
 }
 </style>

src/components/by-form/index.js

@@ -0,0 +1,116 @@
+import './by-table.scss'
+export default {
+    data() {
+        return {
+
+        }
+    },
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        },
+        columns: {
+            type: Array,
+            default: () => []
+        },
+        // 每页条数
+        pageSize: {
+            type: Number,
+            default: 10
+        },
+        // 总条数
+        total: {
+            type: Number,
+            default: 0
+        },
+        // 当前页码
+        pageNum: {
+            type: Number,
+            default: 1
+        },
+    },
+    methods: {
+        //操作按钮
+        renderActionColumn(h, actions) {
+            return <el-table-column
+                label={actions.label || '操作'}
+                width={actions.width || 200}
+                align="right"
+                {...{
+                    scopedSlots: {
+                        default: row => {
+                            //循环按钮，触发配置方法
+                            return actions.actions.map(item => {
+                                return <el-button
+                                    type="text"
+                                    disabled={item.disabled || false}
+                                    onClick={
+                                        () => item.fn ? item.fn(row) : console.log('请配置fn方法')
+                                    }
+                                    style={actions.style || 'color:#0084FF'}>
+                                    {item.text}
+                                </el-button>
+                            })
+                        }
+                    }
+                }}
+            >
+            </el-table-column>
+        },
+        //拼接table
+        renderTable() {
+            return (
+                <elTable data={this.data}>
+                    {
+                        this.columns.map(item => {
+                            if (item.actions) {
+                                console.log(item.actions)
+                                return this.renderActionColumn(h, item)
+                            } else if (item.textType === 'blue123') {
+
+                            }
+                            else {
+                                return <el-table-column
+                                    prop={item.prop || null}
+                                    label={item.label || 'label没配置哦！'}
+                                    width={item.width || null}
+                                    {...{
+                                        scopedSlots: {
+                                            default: ({ row }) => {
+                                                return <div class={item.textType == 'blue' ||  item.textType == 'blueOrLine' ? 'cl-blue' : ''}>
+                                                    <span 
+                                                        style={item.textType == 'blueOrLine' ? 'border-bottom:1px solid #0084FF;cursor: pointer;' : ''}
+                                                        onClick={
+                                                            () => item.fn ? item.fn(row) : console.log('请配置fn方法')
+                                                        }>
+                                                        {row[item.prop]}
+                                                    </span>
+                                                </div>
+                                            }
+                                        },
+
+                                    }}
+                                >
+                                </el-table-column>
+                            }
+
+                        })
+                    }
+                </elTable>
+            )
+        },
+        renderPage(h) {
+            return <pagination v-show={this.total > 0} total={this.total} page={this.pageNum} limit={this.pageSize}  />
+        },
+    },
+    name: 'by-table',
+    render(h) {
+        const table = this.renderTable(h)
+        const page = this.renderPage(h)
+        return <div class='by-table'>
+            {table}
+            {page}
+        </div>
+    },
+}

src/components/by-table/by-table.scss

@@ -0,0 +1,118 @@
+.el-table__header{
+    th{
+        color: #333333!important;
+        font-size: 14px;
+    }
+}
+.cl-blue{
+    color: #0084FF;
+}
+
+.by-search{
+    display: flex;
+    justify-content: space-between;
+    line-height: 32px;
+    padding-bottom: 24px;
+    .more-text{
+        font-size: 14px;
+        color: #666;
+        padding-left: 20px;
+        position: relative;
+        cursor: pointer;
+    }
+    .more-text:hover{
+        color: #0084FF;
+        i{
+            color: #0084FF;
+        }
+    }
+    .more-text::before{
+        content:' ';
+        position: absolute;
+        left: 0;
+        height: 14px;
+        background-color: #ddd;
+        width: 1px;
+        top: 10px;
+    }
+    .more-icon{
+        cursor: pointer;
+    }
+    .more-icon:hover{
+        i{
+            color: #0084FF;
+        }
+    }
+}
+.el-dropdown-link {
+    cursor: pointer;
+    color: #666666;
+}
+
+.el-dropdown-link:hover{
+    color: #0084FF;
+}
+.el-icon-arrow-down {
+    font-size: 12px;
+}
+//下拉组件
+.by-dropdown{
+    width: 120px;
+    position: relative;
+    text-align: center;
+    height: 32px;
+    z-index: 100;
+    transition: all .5s ease;
+    cursor: pointer;
+    
+    .by-dropdown-title{
+        font-size: 14px;
+        background-color: #fff;
+    }
+    ul{
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 32px;
+        padding: 0;
+        margin: 0;
+        z-index: 100;
+        display: none;
+        li{
+            list-style: none;
+            font-size: 12px;
+            height: 32px;
+            
+        }
+        li:hover{
+            background-color: #EFF6FF;
+            color: #0084FF;
+        }
+    }
+}
+
+.by-dropdown::before{
+    display: block;
+    width: 120px;
+    content:" ";
+    position: absolute;
+    height: 8px;
+    top: 24px;
+    background-color: #fff;
+    left: 0;
+    z-index: 101;
+}
+
+.by-dropdown:hover{
+    background: #FFFFFF;
+    box-shadow: 0px 2px 16px 1px rgba(0,0,0,0.1);
+    border-radius: 2px 2px 2px 2px;
+    opacity: 1;
+    ul{
+        background: #FFFFFF;
+        box-shadow: 0px 2px 16px 1px rgba(0,0,0,0.1);
+        border-radius: 2px 2px 2px 2px;
+        opacity: 1;
+        display: block;
+    }
+}

src/components/by-table/index.js

@@ -0,0 +1,209 @@
+import './by-table.scss'
+export default {
+    data() {
+        return {
+
+        }
+    },
+    props: {
+        //数据源
+        data: {
+            type: Array,
+            default: () => []
+        },
+        // table配置信息 
+        columns: {
+            type: Array,
+            default: () => []
+        },
+        // 每页条数
+        pageSize: {
+            type: Number,
+            default: 10
+        },
+        // 总条数
+        total: {
+            type: Number,
+            default: 0
+        },
+        // 当前页码
+        pageNum: {
+            type: Number,
+            default: 1
+        },
+        //搜索配置
+        selectConfig: {
+            type: Array,
+            default: () => []
+        },
+        //请求参数
+        req: {
+            type: Object,
+            default: () => {
+                return {
+                    pageNum: 1,
+                    pageSize: 10,
+                    total:0,
+                }
+                
+            }
+        }
+
+    },
+    methods: {
+        //操作按钮
+        renderActionColumn(h, actions) {
+            return <el-table-column
+                label={actions.label || '操作'}
+                width={actions.width || 200}
+                align="right"
+                {...{
+                    scopedSlots: {
+                        default: row => {
+                            //循环按钮，触发配置方法
+                            return actions.actions.map(item => {
+                                return <el-button
+                                    type="text"
+                                    disabled={item.disabled || false}
+                                    onClick={
+                                        () => item.fn ? item.fn(row) : console.log('请配置fn方法')
+                                    }
+                                    style={actions.style || 'color:#0084FF'}>
+                                    {item.text}
+                                </el-button>
+                            })
+                        }
+                    }
+                }}
+            >
+            </el-table-column>
+        },
+        //拼接table
+        renderTable(h) {
+            return (
+                <elTable data={this.data}>
+                    {
+                        this.columns.map(item => {
+                            if (item.actions) {
+                                console.log(item.actions)
+                                return this.renderActionColumn(h, item)
+                            } else if (item.render) {
+                                return <el-table-column
+                                    label={item.label || 'label没配置哦！'}
+                                    width={item.width || null}
+                                    {...{
+                                        scopedSlots: {
+                                            default: ({ row }) => {
+                                                return item.render(h,row)
+                                            }
+                                        },
+
+                                    }}
+                                >
+                                </el-table-column>
+                            }
+                            else {
+                                return <el-table-column
+                                    prop={item.prop || null}
+                                    label={item.label || 'label没配置哦！'}
+                                    width={item.width || null}
+                                    {...{
+                                        scopedSlots: {
+                                            default: ({ row }) => {
+                                                return <div class={item.textType == 'blue' ||  item.textType == 'blueOrLine' ? 'cl-blue' : ''}>
+                                                    <span 
+                                                        style={item.textType == 'blueOrLine' ? 'border-bottom:1px solid #0084FF;cursor: pointer;' : ''}
+                                                        onClick={
+                                                            () => item.fn ? item.fn(row) : console.log('请配置fn方法')
+                                                        }>
+                                                        {row[item.prop]}
+                                                    </span>
+                                                </div>
+                                            }
+                                        },
+
+                                    }}
+                                >
+                                </el-table-column>
+                            }
+
+                        })
+                    }
+                </elTable>
+            )
+        },
+        //render分页
+        renderPage(h) {
+            return <pagination v-show={this.total > 0} total={this.total} page={this.pageNum} limit={this.pageSize}  />
+        },
+        renderDropDown(h,item) {
+            const v = this
+            return <div class='by-dropdown'>
+                <div class='by-dropdown-title'>{item.label} <i class="el-icon-caret-bottom el-icon--right"></i></div>
+                <ul class="by-dropdown-lists">
+                    <li onClick={() => {
+                        v.req[item.prop] = null
+                        item.label = item.labelCopy.label
+                        //item.label = item.labelCopy
+                    }}>全部</li>
+                    {
+                        item.data.map(i => {
+                            return <li key={i.value} 
+                            onClick={
+                                () => {
+                                    v.req[item.prop] = i.value
+                                    item.label = i.label
+                                }
+                            }>{i.label}</li>
+                        })
+                    }
+                </ul>
+            </div>
+        },
+        //render搜索
+        renderSearch(h) {
+            if(!this.selectConfig) return <div></div>
+            
+            return <div class='by-search'>
+                <div style='display: flex;'>
+                    {
+                        this.selectConfig.map( item => {
+                            return this.renderDropDown(h,item)
+                        })
+                    }
+                    <div class='more-text'>更多 <i class="el-icon-arrow-right el-icon--right"></i></div>
+                </div>
+                <div  style='display: flex;'>
+                    <el-input
+                        placeholder="请选择日期"
+                        suffix-icon="el-icon-search"
+                        size="mini"
+                        value={this.req.keyword} onInput={$event => this.req.keyword = $event}>
+                    </el-input>
+                    <div class='more-icon'><i class="el-icon-arrow-right el-icon--right"></i></div>
+                </div>
+            </div>
+        },
+        renderSearchInit(){
+            this.selectConfig.map(item => {
+                item.labelCopy = JSON.parse(JSON.stringify(item))
+                console.log(item.labelCopy)
+            })
+        },
+    },
+    created(){
+        this.renderSearchInit()
+    },
+    name: 'by-table',
+    render(h) {
+        
+        const search = this.renderSearch(h)
+        const table = this.renderTable(h)
+        const page = this.renderPage(h)
+        return <div class='by-table'>
+            {search}
+            {table}
+            {page}
+        </div>
+    },
+}

src/components/by-table/index.vue

@@ -0,0 +1,73 @@
+<template>
+	<el-table :data="data" v-bind="attrs">
+		<el-table-column
+			v-for="(item, index) in columnOptions"
+			:key="index"
+			:label="item.label"
+			:prop="item.prop"
+		>
+			<template slot-scope="scope">
+				<slot
+					:name="item.slotName ? item.slotName : ''"
+					:row="scope.row"
+				>
+					{{ scope.row[item.prop] }}
+				</slot>
+			</template>
+		</el-table-column>
+		<el-table-column label="操作">
+			<template slot-scope="scope">
+				<slot name="operation" :row="scope.row">
+					<el-button
+						icon="el-icon-search"
+						@click="search(scope.row)"
+					></el-button>
+					<el-button
+						type="primary"
+						icon="el-icon-edit"
+						@click="edit(scope.row)"
+					></el-button>
+					<el-button
+						type="danger"
+						icon="el-icon-delete"
+						@click="deleteButton(scope.row)"
+					></el-button>
+				</slot>
+			</template>
+		</el-table-column>
+	</el-table>
+</template>
+   
+  <script>
+export default {
+	props: {
+		// 数据
+		data: {
+			type: Array,
+			require: true,
+		},
+		// 列的属性数组
+		columnOptions: {
+			type: Array,
+			require: true,
+		},
+		// element table 的属性
+		attrs: Object,
+	},
+	methods: {
+		// 删除按钮
+		deleteButton(row) {
+			this.$emit('deleteBtn', row)
+		},
+		search(row) {
+			this.$emit('searchBtn', row)
+		},
+		edit(row) {
+			this.$emit('editBtn', row)
+		},
+	},
+}
+</script>
+   
+  <style>
+</style>

src/page/index/index.vue

@@ -6,10 +6,10 @@
     </div> -->
     <!-- <div style="height: 64px"></div> -->
     <div class="avue-layout">
-      <div class="avue-left">
-        <!-- 左侧导航栏 -->
+      <!-- <div class="avue-left">
+        左侧导航栏
         <sidebar />
-      </div>
+      </div> -->
       <div class="avue-main">
         <!-- 顶部标签卡 -->
         <tags />

src/router/axios.js

@@ -35,13 +35,9 @@ axios.interceptors.request.use(
     NProgress.start();
     const meta = config.meta || {};
     const isToken = meta.isToken === false;
-    config.headers["Authorization"] = `Basic ${Base64.encode(
-      `${website.clientId}:${website.clientSecret}`
-    )}`;
+    
     //让每个请求携带token
-    if (getToken() && !isToken) {
-      config.headers[website.tokenHeader] = "bearer " + getToken();
-    }
+    
     //headers中配置text请求
     if (config.text === true) {
       config.headers["Content-Type"] = "text/plain";
@@ -50,6 +46,14 @@ axios.interceptors.request.use(
     if (config.method === "post" && meta.isSerialize === true) {
       config.data = serialize(config.data);
     }
+    if(config.url.indexOf('oauth/captcha') === -1){
+      config.headers["Authorization"] = `Basic ${Base64.encode(
+        `${website.clientId}:${website.clientSecret}`
+      )}`; 
+      if (getToken() && !isToken) {
+        config.headers[website.tokenHeader] = "bearer " + getToken();
+      }
+    }
     return config;
   },
   (error) => {
@@ -59,7 +63,7 @@ axios.interceptors.request.use(
 //http response 拦截
 axios.interceptors.response.use(
   (res) => {
-    //关闭 progress bar
+    //关闭 progress bar 
     NProgress.done();
     //获取状态码
     const status = res.data.code || res.status;

src/router/router.js

@@ -17,7 +17,7 @@ Vue.use(VueRouter)
 //创建路由
 export const createRouter = () =>
   new VueRouter({
-    mode: 'history', // 去掉url中的#
+    //mode: 'history', // 去掉url中的#
     scrollBehavior: () => ({
       y: 0,
     }),

src/styles/media.scss

@@ -35,7 +35,7 @@
   }
 
   .avue-main {
-    width: calc(100% - 60px);
+    //width: calc(100% - 60px);
     left: 60px;
   }
 }
@@ -49,10 +49,11 @@
 
 .avue-main {
   position: absolute;
-  left: 240px;
+  left: 0px;
+  top: 52px;
   padding: 0;
-  width: calc(100% - 240px);
-  height: 100%;
+  width: 100%!important;
+  height: calc(100% - 52px);
   box-sizing: border-box;
   overflow: hidden;
   transition: all 0.5s;

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

@@ -2,10 +2,12 @@
     <div class="video-setting">
       <el-row :gutter="8">
         <el-col :span="6">
+          
           <tree @treeClick="reload"></tree>
         </el-col>
         <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" /> -->
@@ -23,7 +25,15 @@
                 </template>
               </el-table-column>
             </el-table>
-            <pagination v-show="total > 0" :total="total" :page.sync="req.pageNum" :limit.sync="req.pageSize" @pagination="getList" />
+            <by-table 
+              :data="tableList" 
+              :columns="columns"
+              :pageNum.sync="req.pageNum"
+              :pageSize.sync="req.pageSize"
+              :selectConfig="selectConfig"
+              :req="req"
+              :total="total">
+            </by-table>
             <el-dialog title="添加设备" :visible.sync="open" width="30%">
               <test ref="form" v-model="dialogParams" :form-config="dialogForm" :insideRules="dialogRules"></test>
             </el-dialog>
@@ -39,20 +49,92 @@
   import * as API from '@/api/management/video-setting.js'
   import * as APISelect from '@/api/Internet-of-things/select.js'
   import test from '@/components/form-test/index.vue'
+  import byTable from '@/components/by-table/index.js'
   import tree from './tree.vue'
   export default {
     name: 'equipment-management',
-    components: { test,tree },
+    components: { test,tree,byTable },
     data() {
       return {
         viewModal:false,
         req: {
           pageNum: 1,
           pageSize: 10,
-          keyword: '',
+          keyword: '1231',
           tdaApplicationId: '',
           tdaProductId: '',
         },
+        selectConfig:[
+          {
+            label:"合同状态",
+            prop:"tdaProductId",
+            data:[
+              {
+                label:"已关闭",
+                value:"123"
+              }
+            ],
+          },
+          {
+            label:"合同状态",
+            prop:"tdaApplicationId",
+            data:[
+              {
+                label:"已关闭",
+                value:"123"
+              }
+            ],
+          }
+        ],
+        columns:[
+          {
+            label: '姓名',
+            prop: 'title',
+            
+          },
+          {
+            label: '蓝字123',
+            prop: 'title',
+            textType:"blue",
+          },
+          {
+            label: '蓝字加下划线',
+            prop: 'title',
+            textType:"blueOrLine",
+          },
+          {
+            label: 'renderDemo',
+            prop: 'title',
+            width: 180,
+            render: (h, params) => {
+              return <div>131231223131231</div>
+            },
+          },
+          {
+            label: '姓名',
+            prop: 'title',
+            actions:[
+              {
+                text:"保存",
+                type:"text",
+                disabled:true,
+                style:{
+                  color:"red",
+                },
+                fn:(row)=>{
+                  console.log(row)
+                }
+              },
+              {
+                text:"保存",
+                type:"text",
+                style:{
+                  color:"red",
+                },
+              }
+            ],
+          }
+        ],
         
         queryForm: {
           keyword: {

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

@@ -0,0 +1,282 @@
+  <template>
+    <div class="video-setting">
+      <el-row :gutter="8">
+        <el-col :span="6">
+          <tree @treeClick="reload"></tree>
+        </el-col>
+        <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.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="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'
+  import test from '@/components/form-test/index.vue'
+  import tree from './tree.vue'
+  export default {
+    name: 'equipment-management',
+    components: { test,tree },
+    data() {
+      return {
+        viewModal:false,
+        req: {
+          pageNum: 1,
+          pageSize: 10,
+          keyword: '',
+          tdaApplicationId: '',
+          tdaProductId: '',
+        },
+        
+        queryForm: {
+          keyword: {
+            label: this.$t('management.video_setting.keyword'),
+            span: 4,
+          },
+          operation: {
+            // 搜索按钮操作
+            query: () => {
+              this.req.pageNum = 1
+              this.getList()
+            },
+            // 重置按钮操作
+            reset: () => {
+              this.$refs.req.reset()
+              this.getList()
+            },
+          },
+          otherButton: {
+            list: [
+              {
+                name: this.$t('management.video_setting.addModal'),
+                methodsText: 'add',
+                type: 'primary',
+                add: () => {
+                  this.open = true
+                },
+              },
+            ],
+          },
+        },
+        tableList: [],
+        total: 0,
+        loading: false,
+        open: false,
+        title: '',
+        dialogParams: {
+          fileInfoList: '',
+          videoClassifyId: '',
+          title: '',
+          richText: '',
+        },
+        dialogForm: {
+          loadingStatus: false,
+          title: {
+            label: '标题',
+            span: 1
+          },
+          fileInfoList: {
+            label: this.$t('分组名称'),
+            type: 'uploads',
+            data: [],
+            tip:"最多选择6个视频文件",
+            accept:".avi,.wmv,.mkv,.mp4,.mov",
+            fileList:[],
+          }, 
+          videoClassifyId: {
+            label: this.$t('分组名称'),
+            type: 'cascader',
+            props:{
+              label:"name",
+              value: 'id',
+            },
+            data: [],
+          },
+          richText:{
+            label: this.$t('图文说明书'),
+            type: 'editor',
+          },
+          
+          otherButton: {
+            align: 'center',
+            list: [
+              {
+                name: this.$t('cancelText'),
+                methodsText: 'cancel',
+                cancel: () => {
+                  this.$refs.form.reset()
+                  this.open = false
+                },
+              },
+              {
+                name: this.$t('submitText'),
+                methodsText: 'submit',
+                type: 'primary',
+                submit: () => {
+                  console.log(this.dialogParams)
+                  this.handleSubmit()
+                },
+              },
+            ],
+          },
+        },
+        dialogRules: {
+          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() {
+      //this.getSelectList()
+    },
+    mounted() {
+      this.getList()
+      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) => {
+            //this.dataInit(res.data.data)
+            this.dialogForm.videoClassifyId.data = res.data.data
+          },
+          (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
+        this.req.classifyId = row.id
+        this.getList()
+      },
+      getList() {
+        this.loading = true
+        API.videoInfoPage(this.req).then(
+          (res) => {
+            this.total = res.data.data.total
+            this.tableList = res.data.data.records
+            this.loading = false
+          },
+          (err) => {
+            console.log('tdaDevicePage: ' + err)
+            this.loading = false
+          },
+        )
+      },
+      handleSubmit() {
+        const v = this
+        this.$refs.form.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.dialogForm.loadingStatus = true
+            API['videoInfo' + v.modalType](this.dialogParams).then(
+              () => {
+                this.msgSuccess(this.$t(v.modalType == 'Add' ? 'addSuccess' : 'editSuccess'))
+                this.$refs.form.reset()
+                this.open = false
+                this.dialogForm.loadingStatus = false
+                this.getList()
+              },
+              (err) => {
+                console.log('tdaDeviceAdd: ' + err)
+                this.dialogForm.loadingStatus = false
+              },
+            )
+            // } else {
+            //   setTimeout(() => {
+            //     const errorDiv = document.getElementsByClassName('is-error')
+            //     errorDiv[0].scrollIntoView()
+            //   }, 0)
+          }
+        })
+      },
+      handleDelete(row) {
+        this.$confirm(this.$t('askDeleteData'), {
+          confirmButtonText: this.$t('submitText'),
+          cancelButtonText: this.$t('cancelText'),
+          type: 'warning',
+        }).then(() => {
+          API.videoInfoDelete({ id: row.id }).then(() => {
+            this.msgSuccess(this.$t('deleteSuccess'))
+            this.getList()
+          })
+        })
+      },
+    },
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+
+  .box-card {
+    height: calc(100vh - 110px);
+    overflow-y: auto;
+  }
+  </style>
+  

src/views/wel/index.vue

@@ -4,7 +4,6 @@
       <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">
@@ -22,7 +21,7 @@
             </a>
           </p>
         </basic-container>
-      </el-col>
+      </el-col> 
     </el-row>
     <el-row>
       <el-col :span="16">
@@ -669,7 +668,7 @@
       return {
         activeNames: ['1', '2', '3', '5'],
         logActiveNames: ['24'],
-        html:"<p>12312312312\r\n123123123</p>"
+        html:"<p></p>"
       };
     },
     computed: {