Browse Source

素材报表加分页

zhuxinbo 5 years ago
parent
commit
a7a2505626

+ 26 - 12
src/views/modules/Statistics/materialStatistics.vue

@@ -118,16 +118,16 @@
             :dataSource="data"
             bordered
             id="outTable"
-            :pagination="false"
-            @change="onChange"
+            :pagination="pagination"
             :customRow="rowClick"
+            :loading="loading"
           >
             <div slot="url" slot-scope="url">
               <video
                 class="video"
                 :src="url"
                 controls="controls"
-                style="height:200px"
+                style="height:200px;width:112.5px"
               >您的浏览器不支持 video 标签。</video>
             </div>
             <span slot="photoClickRatio" slot-scope="photoClickRatio">{{photoClickRatio|getBo}}</span>
@@ -383,9 +383,6 @@ const columnsDetail = [
     align: 'center'
   }
 ]
-function onChange(pagination, filters, sorter) {
-  //   console.log('params', pagination, filters, sorter)
-}
 export default {
   name: 'data-display-statistics',
   components: {
@@ -400,6 +397,7 @@ export default {
       columnsDetail,
       data: [],
       active: 1,
+      pagin: 1,
       allValue: [],
       startValue: [],
       visible: false,
@@ -408,12 +406,24 @@ export default {
       dataDetail: [],
       dataYestodayDetail: [],
       dataChainRatio: [],
+      loading: false,
+      pagination: {
+        // 分页配置器
+        pageSize: 10, // 一页的数据限制
+        current: 1, // 当前页
+        onChange: current => {
+          // 切换分页时的回调,
+          // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+          this.pagination.current = current
+        }
+      },
       rowClick: record => ({
         // 事件
         on: {
           click: () => {
             // 点击改行时要做的事情
             this.detail = record
+            this.visible = true
             this.getMineList(record.signature)
           }
         }
@@ -452,7 +462,6 @@ export default {
     }
   },
   methods: {
-    onChange,
     handleOk() {
       this.visible = false
     },
@@ -473,9 +482,12 @@ export default {
       }
       this.active = checked
       active = checked
+      this.pagination.current = 1
       this.getList()
     },
     getList() {
+      this.data = []
+      this.loading = true
       var params = {}
       params.userId = this.userInfo().id
       params.type = this.active
@@ -484,13 +496,13 @@ export default {
         params.endDate = this.allValue[1]
       }
       getKuaiShouMaterialMarket(params).then(res => {
-        console.log(res)
         this.data = res.map((item, index) => {
           return {
             key: index,
             ...item
           }
         })
+        this.loading = false
       })
     },
     getMineList(md5) {
@@ -500,20 +512,22 @@ export default {
       params.type = this.active
       params.signature = md5
       getKuaiShouChainRatio(params).then(res => {
-        this.visible = true
-        console.log(res)
         if (res.contrast) {
           var now = {
             key: 1,
             ...res.contrast,
             statDate:
-              this.active == 1 || this.active == 2 ? res.contrast.statDate : res.contrast.startDate + ' ~ ' + res.contrast.endDate
+              this.active == 1 || this.active == 2
+                ? res.contrast.statDate
+                : res.contrast.startDate + ' ~ ' + res.contrast.endDate
           }
           var yesterday = {
             key: 2,
             ...res.beContrast,
             statDate:
-              this.active == 1 || this.active == 2 ? res.beContrast.statDate : res.beContrast.startDate + ' ~ ' + res.beContrast.endDate
+              this.active == 1 || this.active == 2
+                ? res.beContrast.statDate
+                : res.beContrast.startDate + ' ~ ' + res.beContrast.endDate
           }
           var chainRatio = {
             key: 3,

+ 268 - 268
src/views/modules/kuaishouapp/KuaiShouImageList.vue

@@ -1,269 +1,269 @@
-<template>
-  <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="24">
-          <a-col :md="6" :sm="8">
-            <a-form-item label>
-              <a-input v-model="queryParam.imageName"></a-input>
-            </a-form-item>
-          </a-col>
-          <template v-if="toggleSearchStatus">
-            <a-col :md="6" :sm="8">
-              <a-form-item label="视频类别">
-                <a-input placeholder="请输入视频类别" v-model="queryParam.imageType"></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :md="6" :sm="8">
-              <a-form-item label="图片类型">
-                <a-input placeholder="请输入图片类型" v-model="queryParam.materialType"></a-input>
-              </a-form-item>
-            </a-col>
-          </template>
-          <a-col :md="6" :sm="8">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button
-                type="primary"
-                @click="searchReset"
-                icon="reload"
-                style="margin-left: 8px"
-              >重置</a-button>
-              <a @click="handleToggleSearch" style="margin-left: 8px">
-                {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
-              </a>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd()" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('快手-本地图片保存')">导出</a-button>
-      <a-upload
-        name="file"
-        :showUploadList="false"
-        :multiple="false"
-        :headers="tokenHeader"
-        :action="importExcelUrl"
-        @change="handleImportExcel"
-      >
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel">
-            <a-icon type="delete" />删除
-          </a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px">
-          批量操作
-          <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
-
-    <!-- table区域-begin -->
-    <div>
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
-        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
-        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
-      </div>
-
-      <a-table
-        ref="table"
-        size="middle"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange"
-      >
-        <span slot="action" slot-scope="text, record">
-          <a @click="handleEdit(record)">编辑</a>
-
-          <a-divider type="vertical" />
-          <a-dropdown>
-            <a class="ant-dropdown-link">
-              更多
-              <a-icon type="down" />
-            </a>
-            <a-menu slot="overlay">
-              <a-menu-item>
-                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
-                  <a>删除</a>
-                </a-popconfirm>
-              </a-menu-item>
-            </a-menu>
-          </a-dropdown>
-        </span>
-
-        <!-- 图片预览 -->
-        <div slot="coverImagePreview" slot-scope="text, record">
-          <img
-            style="width:100px;cursor: pointer;"
-            :src="record.localUrl"
-            @click="imagePreviewShowModal(record)"
-          />
-          <a-modal
-            title="图片预览"
-            v-model="imagePreviewVisible"
-            @ok="imagePreviewHandleOk"
-            @cancel="imagePreviewHandleCancel"
-            :footer="null"
-            :maskStyle="imagePreviewMaskStyle"
-          >
-            <div style="text-align:center;">
-              <img style="width:250px;" :src="imagePreviewUrl" />
-            </div>
-          </a-modal>
-          <!-- <img style="width:100px;" :src="record.localUrl" @click="handleEdit(record,'preview')" /> -->
-        </div>
-
-        <!-- 图片类别 -->
-        <!-- <div slot="imageTypeShow" slot-scope="text, record">
-            {{record.imageType}}
-            {{imageTypeArr}}
-        </div>-->
-
-        <!-- 图片类型 -->
-        <div
-          slot="materialTypeShow"
-          slot-scope="text, record"
-        >{{materialTypeArr[record.materialType]}}</div>
-
-        <!-- 素材类型 -->
-        <div
-          slot="positionTypeShow"
-          slot-scope="text, record"
-        >{{positionTypeArr[record.positionType]}}</div>
-      </a-table>
-    </div>
-    <!-- table区域-end -->
-
-    <!-- 表单区域 -->
-    <kuaiShouImage-modal ref="modalForm" @ok="modalFormOk"></kuaiShouImage-modal>
-  </a-card>
-</template>
-
-<script>
-import KuaiShouImageModal from './modules/KuaiShouImageModal'
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-
-export default {
-  name: 'KuaiShouImageList',
-  mixins: [JeecgListMixin],
-  components: {
-    KuaiShouImageModal
-  },
-  data() {
-    return {
-      imageTypeArr: ['类别1', '类别2'], // 图片类别
-      materialTypeArr: ['', '竖版图片', '横版图片'], // 图片类型
-      positionTypeArr: ['', '信息广告流', '后贴片'], // 素材类型
-      description: '快手-本地图片保存管理页面',
-      // 表头
-      columns: [
-        {
-          title: '#',
-          dataIndex: '',
-          key: 'rowIndex',
-          width: 60,
-          align: 'center',
-          customRender: function(t, r, index) {
-            return parseInt(index) + 1
-          }
-        },
-        {
-          title: '图片预览',
-          align: 'center',
-          // dataIndex: 'localUrl',
-          dataIndex: 'coverImagePreview',
-          scopedSlots: { customRender: 'coverImagePreview' }
-        },
-        {
-          title: '图片名称',
-          align: 'center',
-          dataIndex: 'imageName'
-        },
-        // {
-        //   title: '图片类别',
-        //   align: 'center',
-        //   dataIndex: 'imageType'
-        //   //   dataIndex: 'imageTypeShow',
-        //   // scopedSlots: { customRender: 'imageTypeShow' }
-        // },
-
-        {
-          title: '图片类型',
-          align: 'center',
-          //   dataIndex: 'materialType'
-          dataIndex: 'materialTypeShow',
-          scopedSlots: { customRender: 'materialTypeShow' }
-        },
-        {
-          title: '素材',
-          align: 'center',
-          //   dataIndex: 'positionType',
-          dataIndex: 'positionTypeShow',
-          scopedSlots: { customRender: 'positionTypeShow' }
-        },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          align: 'center',
-          scopedSlots: { customRender: 'action' }
-        }
-      ],
-      url: {
-        list: '/kuaishou/kuaiShouImage/list',
-        delete: '/kuaishou/kuaiShouImage/delete',
-        deleteBatch: '/kuaishou/kuaiShouImage/deleteBatch',
-        exportXlsUrl: 'kuaishou/kuaiShouImage/exportXls',
-        importExcelUrl: 'kuaishou/kuaiShouImage/importExcel'
-      },
-
-      //   图片预览弹窗
-      imagePreviewVisible: false,
-      imagePreviewMaskStyle: {
-        background: 'rgba(0,0,0,.08)'
-      },
-      imagePreviewUrl: ''
-    }
-  },
-  computed: {
-    importExcelUrl: function() {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
-    }
-  },
-  methods: {
-    testUrl(url) {
-      console.log(url)
-    },
-
-    // 图片预览弹窗
-    imagePreviewShowModal(record) {
-      this.imagePreviewVisible = true
-      this.imagePreviewUrl = record.localUrl
-    },
-    imagePreviewHandleOk() {
-      this.imagePreviewVisible = false
-    },
-    imagePreviewHandleCancel() {
-      this.imagePreviewVisible = false
-      this.imagePreviewUrl = ''
-    }
-  }
-}
-</script>
-<style scoped>
-@import '~@assets/less/common.less';
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label>
+              <a-input v-model="queryParam.imageName"></a-input>
+            </a-form-item>
+          </a-col>
+          <template v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="视频类别">
+                <a-input placeholder="请输入视频类别" v-model="queryParam.imageType"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="图片类型">
+                <a-input placeholder="请输入图片类型" v-model="queryParam.materialType"></a-input>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="6" :sm="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <!-- <div class="table-operator">
+      <a-button @click="handleAdd()" type="primary" icon="plus">新增</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('快手-本地图片保存')">导出</a-button>
+      <a-upload
+        name="file"
+        :showUploadList="false"
+        :multiple="false"
+        :headers="tokenHeader"
+        :action="importExcelUrl"
+        @change="handleImportExcel"
+      >
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel">
+            <a-icon type="delete" />删除
+          </a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作
+          <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>-->
+
+    <!-- table区域-begin -->
+    <div>
+      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
+        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>-->
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange"
+      >
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+
+          <a-divider type="vertical" />
+          <a-dropdown>
+            <a class="ant-dropdown-link">
+              更多
+              <a-icon type="down" />
+            </a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
+
+        <!-- 图片预览 -->
+        <div slot="coverImagePreview" slot-scope="text, record">
+          <img
+            style="width:100px;cursor: pointer;"
+            :src="record.localUrl"
+            @click="imagePreviewShowModal(record)"
+          />
+          <a-modal
+            title="图片预览"
+            v-model="imagePreviewVisible"
+            @ok="imagePreviewHandleOk"
+            @cancel="imagePreviewHandleCancel"
+            :footer="null"
+            :maskStyle="imagePreviewMaskStyle"
+          >
+            <div style="text-align:center;">
+              <img style="width:250px;" :src="imagePreviewUrl" />
+            </div>
+          </a-modal>
+          <!-- <img style="width:100px;" :src="record.localUrl" @click="handleEdit(record,'preview')" /> -->
+        </div>
+
+        <!-- 图片类别 -->
+        <!-- <div slot="imageTypeShow" slot-scope="text, record">
+            {{record.imageType}}
+            {{imageTypeArr}}
+        </div>-->
+
+        <!-- 图片类型 -->
+        <div
+          slot="materialTypeShow"
+          slot-scope="text, record"
+        >{{materialTypeArr[record.materialType]}}</div>
+
+        <!-- 素材类型 -->
+        <div
+          slot="positionTypeShow"
+          slot-scope="text, record"
+        >{{positionTypeArr[record.positionType]}}</div>
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <!-- 表单区域 -->
+    <kuaiShouImage-modal ref="modalForm" @ok="modalFormOk"></kuaiShouImage-modal>
+  </a-card>
+</template>
+
+<script>
+import KuaiShouImageModal from './modules/KuaiShouImageModal'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+
+export default {
+  name: 'KuaiShouImageList',
+  mixins: [JeecgListMixin],
+  components: {
+    KuaiShouImageModal
+  },
+  data() {
+    return {
+      imageTypeArr: ['类别1', '类别2'], // 图片类别
+      materialTypeArr: ['', '竖版图片', '横版图片'], // 图片类型
+      positionTypeArr: ['', '信息广告流', '后贴片'], // 素材类型
+      description: '快手-本地图片保存管理页面',
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function(t, r, index) {
+            return parseInt(index) + 1
+          }
+        },
+        {
+          title: '图片预览',
+          align: 'center',
+          // dataIndex: 'localUrl',
+          dataIndex: 'coverImagePreview',
+          scopedSlots: { customRender: 'coverImagePreview' }
+        },
+        {
+          title: '图片名称',
+          align: 'center',
+          dataIndex: 'imageName'
+        },
+        // {
+        //   title: '图片类别',
+        //   align: 'center',
+        //   dataIndex: 'imageType'
+        //   //   dataIndex: 'imageTypeShow',
+        //   // scopedSlots: { customRender: 'imageTypeShow' }
+        // },
+
+        {
+          title: '图片类型',
+          align: 'center',
+          //   dataIndex: 'materialType'
+          dataIndex: 'materialTypeShow',
+          scopedSlots: { customRender: 'materialTypeShow' }
+        },
+        {
+          title: '素材',
+          align: 'center',
+          //   dataIndex: 'positionType',
+          dataIndex: 'positionTypeShow',
+          scopedSlots: { customRender: 'positionTypeShow' }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/kuaishou/kuaiShouImage/list',
+        delete: '/kuaishou/kuaiShouImage/delete',
+        deleteBatch: '/kuaishou/kuaiShouImage/deleteBatch',
+        exportXlsUrl: 'kuaishou/kuaiShouImage/exportXls',
+        importExcelUrl: 'kuaishou/kuaiShouImage/importExcel'
+      },
+
+      //   图片预览弹窗
+      imagePreviewVisible: false,
+      imagePreviewMaskStyle: {
+        background: 'rgba(0,0,0,.08)'
+      },
+      imagePreviewUrl: ''
+    }
+  },
+  computed: {
+    importExcelUrl: function() {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+    }
+  },
+  methods: {
+    testUrl(url) {
+      console.log(url)
+    },
+
+    // 图片预览弹窗
+    imagePreviewShowModal(record) {
+      this.imagePreviewVisible = true
+      this.imagePreviewUrl = record.localUrl
+    },
+    imagePreviewHandleOk() {
+      this.imagePreviewVisible = false
+    },
+    imagePreviewHandleCancel() {
+      this.imagePreviewVisible = false
+      this.imagePreviewUrl = ''
+    }
+  }
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
 </style>

+ 205 - 205
src/views/modules/kuaishouapp/KuaiShouVideoList.vue

@@ -1,206 +1,206 @@
-<template>
-  <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="24">
-          <template v-if="toggleSearchStatus">
-            <a-col :md="6" :sm="8">
-              <a-form-item label="视频名称">
-                <a-input placeholder="请输入视频名称" v-model="queryParam.videoName"></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :md="6" :sm="8">
-              <a-form-item label="视频类别">
-                <a-input placeholder="请输入视频类别" v-model="queryParam.videoType"></a-input>
-              </a-form-item>
-            </a-col>
-          </template>
-          <a-col :md="6" :sm="8">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button
-                type="primary"
-                @click="searchReset"
-                icon="reload"
-                style="margin-left: 8px"
-              >重置</a-button>
-              <a @click="handleToggleSearch" style="margin-left: 8px">
-                {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
-              </a>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd('add')" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('快手-上传视频')">导出</a-button>
-      <a-upload
-        name="file"
-        :showUploadList="false"
-        :multiple="false"
-        :headers="tokenHeader"
-        :action="importExcelUrl"
-        @change="handleImportExcel"
-      >
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel">
-            <a-icon type="delete" />删除
-          </a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px">
-          批量操作
-          <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
-
-    <!-- table区域-begin -->
-    <div>
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
-        <a style="font-weight: 600">
-          {{
-          selectedRowKeys.length }}
-        </a>项
-        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
-      </div>
-
-      <a-table
-        ref="table"
-        size="middle"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange"
-      >
-        <span slot="action" slot-scope="text, record">
-          <a @click="handleEdit(record)">编辑</a>
-
-          <a-divider type="vertical" />
-          <a-dropdown>
-            <a class="ant-dropdown-link">
-              更多
-              <a-icon type="down" />
-            </a>
-            <a-menu slot="overlay">
-              <a-menu-item>
-                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
-                  <a>删除</a>
-                </a-popconfirm>
-              </a-menu-item>
-            </a-menu>
-          </a-dropdown>
-        </span>
-
-        <!-- 视频预览 -->
-        <div slot="coverVideoPreview" slot-scope="text, record" class="coverVideoPreview">
-          <video
-            class="video"
-            style="width:100px;"
-            :src="record.localUrl"
-            controls="controls"
-          >您的浏览器不支持 video 标签。</video>
-          <img src="" alt="">
-        </div>
-        <!-- 视频预览 E -->
-      </a-table>
-    </div>
-    <!-- table区域-end -->
-
-    <!-- 表单区域 -->
-    <kuaiShouVideo-modal ref="modalForm" @ok="modalFormOk"></kuaiShouVideo-modal>
-  </a-card>
-</template>
-
-<script>
-import KuaiShouVideoModal from './modules/KuaiShouVideoModal'
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import { create } from 'domain'
-import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
-
-export default {
-  name: 'KuaiShouVideoList',
-  mixins: [JeecgListMixin],
-  components: {
-    KuaiShouVideoModal
-  },
-  data() {
-    return {
-      description: '快手-上传视频管理页面',
-      // 表头
-      columns: [
-        {
-          title: '#',
-          dataIndex: '',
-          key: 'rowIndex',
-          width: 60,
-          align: 'center',
-          customRender: function(t, r, index) {
-            return parseInt(index) + 1
-          }
-        },
-        {
-          title: '视频本地地址',
-          align: 'center',
-          // dataIndex: 'localUrl',
-          dataIndex: 'coverVideoPreview',
-          scopedSlots: { customRender: 'coverVideoPreview' }
-        },
-        {
-          title: '视频描述',
-          align: 'center',
-          dataIndex: 'videoDesc'
-        },
-        {
-          title: '视频名称',
-          align: 'center',
-          dataIndex: 'videoName'
-        },
-        {
-          title: '视频类别',
-          align: 'center',
-          dataIndex: 'videoType'
-        },
-
-        {
-          title: '操作',
-          dataIndex: 'action',
-          align: 'center',
-          scopedSlots: { customRender: 'action' }
-        }
-      ],
-      url: {
-        list: '/kuaishou/kuaiShouVideo/list',
-        delete: '/kuaishou/kuaiShouVideo/delete',
-        deleteBatch: '/kuaishou/kuaiShouVideo/deleteBatch',
-        exportXlsUrl: 'kuaishou/kuaiShouVideo/exportXls',
-        importExcelUrl: 'kuaishou/kuaiShouVideo/importExcel'
-      }
-    }
-  },
-  computed: {
-    importExcelUrl: function() {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
-    }
-  },
-  methods: {},
-  updated() {
-    stopOtherVideo()
-  }
-}
-</script>
-<style scoped>
-@import '~@assets/less/common.less';
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <template v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="视频名称">
+                <a-input placeholder="请输入视频名称" v-model="queryParam.videoName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="视频类别">
+                <a-input placeholder="请输入视频类别" v-model="queryParam.videoType"></a-input>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="6" :sm="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <!-- <div class="table-operator">
+      <a-button @click="handleAdd('add')" type="primary" icon="plus">新增</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('快手-上传视频')">导出</a-button>
+      <a-upload
+        name="file"
+        :showUploadList="false"
+        :multiple="false"
+        :headers="tokenHeader"
+        :action="importExcelUrl"
+        @change="handleImportExcel"
+      >
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel">
+            <a-icon type="delete" />删除
+          </a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作
+          <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>-->
+
+    <!-- table区域-begin -->
+    <div>
+      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
+        <a style="font-weight: 600">
+          {{
+          selectedRowKeys.length }}
+        </a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div> -->
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange"
+      >
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+
+          <a-divider type="vertical" />
+          <a-dropdown>
+            <a class="ant-dropdown-link">
+              更多
+              <a-icon type="down" />
+            </a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
+
+        <!-- 视频预览 -->
+        <div slot="coverVideoPreview" slot-scope="text, record" class="coverVideoPreview">
+          <video
+            class="video"
+            style="width:100px;"
+            :src="record.localUrl"
+            controls="controls"
+          >您的浏览器不支持 video 标签。</video>
+          <img src alt />
+        </div>
+        <!-- 视频预览 E -->
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <!-- 表单区域 -->
+    <kuaiShouVideo-modal ref="modalForm" @ok="modalFormOk"></kuaiShouVideo-modal>
+  </a-card>
+</template>
+
+<script>
+import KuaiShouVideoModal from './modules/KuaiShouVideoModal'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { create } from 'domain'
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
+
+export default {
+  name: 'KuaiShouVideoList',
+  mixins: [JeecgListMixin],
+  components: {
+    KuaiShouVideoModal
+  },
+  data() {
+    return {
+      description: '快手-上传视频管理页面',
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function(t, r, index) {
+            return parseInt(index) + 1
+          }
+        },
+        {
+          title: '视频本地地址',
+          align: 'center',
+          // dataIndex: 'localUrl',
+          dataIndex: 'coverVideoPreview',
+          scopedSlots: { customRender: 'coverVideoPreview' }
+        },
+        {
+          title: '视频描述',
+          align: 'center',
+          dataIndex: 'videoDesc'
+        },
+        {
+          title: '视频名称',
+          align: 'center',
+          dataIndex: 'videoName'
+        },
+        {
+          title: '视频类别',
+          align: 'center',
+          dataIndex: 'videoType'
+        },
+
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/kuaishou/kuaiShouVideo/list',
+        delete: '/kuaishou/kuaiShouVideo/delete',
+        deleteBatch: '/kuaishou/kuaiShouVideo/deleteBatch',
+        exportXlsUrl: 'kuaishou/kuaiShouVideo/exportXls',
+        importExcelUrl: 'kuaishou/kuaiShouVideo/importExcel'
+      }
+    }
+  },
+  computed: {
+    importExcelUrl: function() {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+    }
+  },
+  methods: {},
+  updated() {
+    stopOtherVideo()
+  }
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
 </style>

+ 2 - 2
vue.config.js

@@ -65,8 +65,8 @@ module.exports = {
        },*/
       '/jeecg-boot': {
         // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
-        target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
-        // target: 'http://192.168.2.130:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+        // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
+        target: 'http://192.168.2.130:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.2.132:8080', //请求本地 需要jeecg-boot后台项目
         ws: false,
         changeOrigin: true