1、

src/views/modules/promotion/promotionVideo.vue

@@ -72,7 +72,7 @@
           <div class="default-btn" @click="setDateRange(3)">近3天</div>
           <div class="default-btn" @click="setDateRange(4)">近5天</div>
           <div class="default-btn primary-btn" @click="searchChange()">{{$t("crud.searchBtn")}}</div>
-<!--          <div class="default-btn" @click="getSoldExcel()">{{ $t("order.export") }}</div>-->
+          <!--          <div class="default-btn" @click="getSoldExcel()">{{ $t("order.export") }}</div>-->
           <div class="default-btn" @click="clear()">重置</div>
         </el-form-item>
       </el-form>
@@ -80,24 +80,31 @@
     <!-- 列表相关区域 -->
     <div class="main-container">
       <div class="operation-bar">
-<!--        <div class="default-btn primary-btn" @click="addOrUpdateHandle()"-->
-<!--             v-if="isAuth('print:promotionVideo:save')">{{$t("crud.addTitle")}}</div>-->
-<!--        <div class="default-btn primary-btn" @click="addOrUpdateHandle()">{{$t("crud.addTitle")}}</div>-->
-<!--        <div class="default-btn primary-btn" @click="openUploadDialog()">导入数据</div>-->
+        <el-button type="primary" size="small" :loading="syncVisible" @click="handleSyncBatch()">批量同步数据</el-button>
       </div>
       <div class="table-con spec-table">
         <el-table
           ref="specListTable"
           :data="dataList"
+          @selection-change="handleSelectionChange"
           header-cell-class-name="table-header"
           row-class-name="table-row"
+          :row-key="row => { return row.id }"
           style="width: 100%">
+          <el-table-column
+            type="selection"
+            align="center"
+            fixed="left"
+            width="55"
+            :reserve-selection="true"
+          >
+          </el-table-column>
           <!-- 视频ID -->
-          <el-table-column label="视频ID" prop="id" align="center" width="70px">
+          <!--<el-table-column label="视频ID" prop="id" align="center" width="70px">
             <template slot-scope="scope">
               <span>{{ scope.row.id}}</span>
             </template>
-          </el-table-column>
+          </el-table-column>-->
           <!-- 推广人名称 -->
           <el-table-column label="推广人" prop="tgUserName" align="center" width="70px">
             <template slot-scope="scope">
@@ -184,57 +191,71 @@
             </template>
           </el-table-column>
           <!-- 是否付费，0寄拍，1付费 -->
-          <el-table-column label="寄拍/付费" prop="payType" align="center" width="80px">
+          <el-table-column label="寄拍/付费" prop="payType" align="center" width="170px">
             <template slot-scope="scope">
               <el-tag v-if="scope.row.payType === '付费'" type="danger">付费:{{scope.row.payAmt}}</el-tag>
               <el-tag v-if="scope.row.payType === '寄拍'" type="primary">寄拍:{{scope.row.payAmt}}</el-tag>
+              <el-tag v-if="scope.row.settleStatus === '待结算'" type="danger">待结算</el-tag>
+              <el-tag v-if="scope.row.settleStatus === '已结算'" type="success">已结算</el-tag>
             </template>
           </el-table-column>
-          <!--<el-table-column label="付费金额" prop="payAmt" align="center">
-            <template slot-scope="scope">
-              <span>{{ scope.row.payAmt}}</span>
-            </template>
-          </el-table-column>-->
-          <!-- 结算状态 -->
-          <el-table-column label="结算状态" prop="settleStatus" align="center" width="90px">
+          <!--<el-table-column label="结算状态" prop="settleStatus" align="center" width="90px">
             <template slot-scope="scope">
               <el-tag v-if="scope.row.settleStatus === '待结算'" type="danger">待结算</el-tag>
               <el-tag v-if="scope.row.settleStatus === '已结算'" type="success">已结算</el-tag>
             </template>
-          </el-table-column>
+          </el-table-column>-->
           <el-table-column label="发布状态" prop="status" align="center" width="90px">
             <template slot-scope="scope">
               <el-tag v-if="scope.row.status === '待发布'" type="warning">待发布</el-tag>
               <el-tag v-if="scope.row.status === '已发布'" type="success">已发布</el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="发布时间" prop="publishTime" align="center">
+          <el-table-column label="发布时间" prop="publishTime" align="center" width="120px">
             <template slot-scope="scope">
               <span>{{ scope.row.publishTime}}</span>
             </template>
           </el-table-column>
+          <el-table-column label="创建时间" prop="createTime" align="center" width="120px">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="同步状态" prop="syncStatus" align="center" width="110px">
+            <template slot-scope="scope">
+              <el-tag v-if="scope.row.syncStatus === '失败'" type="danger">失败</el-tag>
+              <el-tag v-if="scope.row.syncStatus === '成功'" type="success">成功</el-tag>
+              <br/>
+              <span>{{ scope.row.syncTime}}</span>
+            </template>
+          </el-table-column>
+          <!--<el-table-column label="同步时间" prop="publishTime" align="center" width="120px">
+            <template slot-scope="scope">
+              <span>{{ scope.row.syncTime}}</span>
+            </template>
+          </el-table-column>-->
           <el-table-column align="center" fixed="right" :label="$t('publics.operating')" width="auto">
             <template slot-scope="scope">
               <div class="text-btn-con">
                 <div class="default-btn text-btn" @click="addOrUpdateHandle(scope.row.id)">{{$t("crud.updateBtn")}}</div>
+                <el-button class="default-btn text-btn" v-if="scope.row.publishPlatform !== '视频号'" :loading="syncVisible" @click.stop="syncHandle(scope.row, scope.$index)">同步</el-button>
                 <div class="default-btn text-btn" @click.stop="deleteHandle(scope.row.id)">{{$t("text.delBtn")}}</div>
-                <el-button class="default-btn text-btn" :loading="syncVisible" @click.stop="syncHandle(scope.row.id)">同步</el-button>
-                </div>
+              </div>
             </template>
           </el-table-column>
         </el-table>
       </div>
-        <el-pagination
-          v-if="dataList.length"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="page.currentPage"
-          :page-sizes="[10, 20, 50, 100]"
-          :page-size="page.pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="page.total">
-        </el-pagination>
-      </div>
+      <el-pagination
+        v-if="dataList.length"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="page.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="page.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="page.total">
+      </el-pagination>
+    </div>
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="refreshChange"></add-or-update>
     <promotion-video-upload
       v-if="uploadVisible"
@@ -245,207 +266,237 @@
 </template>
 
 <script>
-import AddOrUpdate from './promotionVideo-add-or-update'
-import PromotionVideoUpload from './promotion-video-upload'
-import InputNumberRange from '@/components/input-number-range'
-import moment from "moment";
-export default {
-  data () {
-    return {
-      dataList: [],
-      page: {
-        total: 0, // 总页数
-        currentPage: 1, // 当前页数
-        pageSize: 10 // 每页显示多少条
-      },
-      syncVisible: false,
-      shopId: this.$store.state.user.shopId,
-      searchForm: {}, // 搜索
-      dataListLoading: false,
-      addOrUpdateVisible: false,
-      shopList: [],
-      videoPlatformList: [
-        {value: '抖音', label: '抖音'},
-        {value: '小红书', label: '小红书'},
-        {value: '视频号', label: '视频号'},
-        {value: '快手', label: '快手'},
-        {value: 'B站', label: 'B站'},
-      ],
-      publishTimeDateRange:[],
-      uploadVisible: false,
-      fansNumRange: [],
-      likeNumRange: [],
-      commNumRange: [],
-    }
-  },
-  components: {
-    AddOrUpdate,
-    PromotionVideoUpload,
-    InputNumberRange
-  },
-  created () {
-    this.getDataList(this.page);
-  },
-  mounted () {
-    this.getShopList()
-  },
-  methods: {
-    syncHandle(videoId){
-      this.syncVisible = true
-      this.$http({
-        url: this.$http.adornUrl('/promotion/promotionVideo/syncVideoData'),
-        method: 'POST',
-        data: this.$http.adornData({id: videoId})
-      }).then(({ data }) => {
-        this.syncVisible = false
-        this.$message({
-          message: this.$i18n.t('publics.operation'),
-          type: 'success',
-        })
-        this.refreshChange()
-      }).catch((error) =>{
-        this.syncVisible = false
-      })
+  import AddOrUpdate from './promotionVideo-add-or-update'
+  import PromotionVideoUpload from './promotion-video-upload'
+  import InputNumberRange from '@/components/input-number-range'
+  import moment from "moment";
+  export default {
+    data () {
+      return {
+        dataList: [],
+        page: {
+          total: 0, // 总页数
+          currentPage: 1, // 当前页数
+          pageSize: 10 // 每页显示多少条
+        },
+        syncVisible: false,
+        shopId: this.$store.state.user.shopId,
+        searchForm: {}, // 搜索
+        dataListLoading: false,
+        addOrUpdateVisible: false,
+        shopList: [],
+        videoPlatformList: [
+          {value: '抖音', label: '抖音'},
+          {value: '小红书', label: '小红书'},
+          {value: '视频号', label: '视频号'},
+          {value: '快手', label: '快手'},
+          {value: 'B站', label: 'B站'},
+        ],
+        publishTimeDateRange:[],
+        uploadVisible: false,
+        fansNumRange: [],
+        likeNumRange: [],
+        commNumRange: [],
+        dataListSelections:[]
+      }
     },
-    openUploadDialog(){
-      this.uploadVisible = true
-      this.$nextTick(() => {
-        this.$refs.promotionVideoUpload.init()
-      })
+    components: {
+      AddOrUpdate,
+      PromotionVideoUpload,
+      InputNumberRange
     },
-    jumpToLink(videoUrl){
-      let regex = /https?:\/\/[^\s]+/g // 匹配URL的正则表达式
-      let url =  videoUrl.match(regex) // 返回所有匹配到的链接
-      window.open(url)
+    created () {
+      this.getDataList(this.page);
     },
-    clear(){
-      this.searchForm = {}
-      this.publishTimeDateRange = []
-      this.fansNumRange = []
-      this.likeNumRange = []
-      this.commNumRange = []
+    mounted () {
+      this.getShopList()
     },
-    getShopList() {
-      this.$http({
-        url: this.$http.adornUrl('/shop/shopDetail/getShopList'),
-        method: 'get',
-        params: this.$http.adornParams({shopId: this.shopId})
-      }).then(({ data }) => {
-        if (data) {
-          this.shopList = data
+    methods: {
+      handleSelectionChange (val) {
+        this.dataListSelections = val
+        console.log(val)
+      },
+      handleSyncBatch(){
+        if(this.dataListSelections.length === 0){
+          this.$message.warning("至少选择一条数据")
         }
-      })
-    },
-    getDataList (page) {
-      this.dataListLoading = true
-      this.$http({
-        url: this.$http.adornUrl('/promotion/promotionVideo/page'),
-        method: 'get',
-        params: this.$http.adornParams(
-          Object.assign({
-            current: page == null ? this.page.currentPage : page.currentPage,
-            size: page == null ? this.page.pageSize : page.pageSize,
-            startLikeNum: this.likeNumRange === null ? null : this.likeNumRange[0] ? this.likeNumRange[0]:0,
-            endLikeNum: this.likeNumRange === null ? null : this.likeNumRange[1] ? this.likeNumRange[1]:0,
-            startCommNum: this.commNumRange === null ? null : this.commNumRange[0] ? this.commNumRange[0]:0,
-            endCommNum: this.commNumRange === null ? null : this.commNumRange[1] ? this.commNumRange[1]:0,
-            startFansNum: this.fansNumRange === null ? null : this.fansNumRange[0] ? this.fansNumRange[0]:0,
-            endFansNum: this.fansNumRange === null ? null : this.fansNumRange[1] ? this.fansNumRange[1]:0,
-            startPublishTime: this.publishTimeDateRange === null ? null : this.publishTimeDateRange[0] ? this.publishTimeDateRange[0]:null,
-            endPublishTime: this.publishTimeDateRange === null ? null : this.publishTimeDateRange[1] ? this.publishTimeDateRange[1]:null,
-              shopId: this.$store.state.user.shopId,
-          },
-            this.searchForm
-          )
-        )
-      }).then(({data}) => {
-        this.dataList = data.records
-        this.page.total = data.total
-        this.dataListLoading = false
-      })
-    },
-    querySearch (queryString, cb) {
-      var restaurants = this.videoPlatformList
-      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    },
-    createFilter (queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-      }
-    },
-    setDateRange(val) {
-      var startDay = null
-      var endDay = null
-      if (val === 1) {
-        startDay = 0
-        endDay = 0
-      } else if (val === 2) {
-        startDay = -1
-        endDay = -1
-      } else if (val === 3) {
-        startDay = -3
-        endDay = -1
-      } else if (val === 4) {
-        startDay = -5
-        endDay = -1
-      } else {
-        return
-      }
-      // 开始时间
-      let startTime = moment().add(startDay, 'days').startOf('days').format('LL')
-      // 结束时间
-      let endTime = moment().add(endDay, 'days').endOf('days').format('LL')
-      this.publishTimeDateRange = [startTime, endTime]
-    },
-    // 新增 / 修改
-    addOrUpdateHandle (id) {
-      this.addOrUpdateVisible = true
-      this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(id)
-      })
-    },
-    deleteHandle (id) {
-      this.$confirm(this.$i18n.t('admin.isDeleOper') + '?', this.$i18n.t('text.tips'), {
-        confirmButtonText: this.$i18n.t('crud.filter.submitBtn'),
-        cancelButtonText: this.$i18n.t('crud.filter.cancelBtn'),
-        type: 'warning'
-      }).then(() => {
+        this.syncVisible = true
         this.$http({
-          url: this.$http.adornUrl('/promotion/promotionVideo/' + id),
-          method: 'delete',
-          data: this.$http.adornData({})
+          url: this.$http.adornUrl('/promotion/promotionVideo/syncVideoDataBatch'),
+          method: 'POST',
+          data: this.$http.adornData({videoList: this.dataListSelections})
         }).then(({ data }) => {
+          this.syncVisible = false
           this.$message({
             message: this.$i18n.t('publics.operation'),
             type: 'success',
           })
-          this.refreshChange()
+          for(let item in data){
+            let index = this.dataList.findIndex(d => d.id === data[item].id)
+            this.$set(this.dataList, index, data[item])
+          }
+        }).catch((error) =>{
+          this.syncVisible = false
         })
-      }).catch(() => { })
-    },
-    // 刷新回调
-    refreshChange () {
-      this.page.currentPage = 1
-      this.getDataList(this.page)
-    },
-    searchChange (params) {
-      this.page.currentPage = 1
-      this.getDataList(null)
-    },
-    handleSizeChange (val) {
-      this.page.pageSize = val
-      this.getDataList()
-    },
-    handleCurrentChange (val) {
-      this.page.currentPage = val
-      this.getDataList()
+      },
+      syncHandle(row, index){
+        this.syncVisible = true
+        this.$http({
+          url: this.$http.adornUrl('/promotion/promotionVideo/syncVideoData'),
+          method: 'POST',
+          data: this.$http.adornData({id: row.id})
+        }).then(({ data }) => {
+          this.syncVisible = false
+          this.$message({
+            message: this.$i18n.t('publics.operation'),
+            type: 'success',
+          })
+          this.$set(this.dataList, index, data);
+          // this.dataList[index] = data
+        }).catch((error) =>{
+          this.syncVisible = false
+          this.$set(this.dataList, index, data);
+        })
+      },
+      openUploadDialog(){
+        this.uploadVisible = true
+        this.$nextTick(() => {
+          this.$refs.promotionVideoUpload.init()
+        })
+      },
+      jumpToLink(videoUrl){
+        let regex = /https?:\/\/[^\s]+/g // 匹配URL的正则表达式
+        let url =  videoUrl.match(regex) // 返回所有匹配到的链接
+        window.open(url)
+      },
+      clear(){
+        this.searchForm = {}
+        this.publishTimeDateRange = []
+        this.fansNumRange = []
+        this.likeNumRange = []
+        this.commNumRange = []
+      },
+      getShopList() {
+        this.$http({
+          url: this.$http.adornUrl('/shop/shopDetail/getShopList'),
+          method: 'get',
+          params: this.$http.adornParams({shopId: this.shopId})
+        }).then(({ data }) => {
+          if (data) {
+            this.shopList = data
+          }
+        })
+      },
+      getDataList (page) {
+        this.dataListLoading = true
+        this.$http({
+          url: this.$http.adornUrl('/promotion/promotionVideo/page'),
+          method: 'get',
+          params: this.$http.adornParams(
+            Object.assign({
+                current: page == null ? this.page.currentPage : page.currentPage,
+                size: page == null ? this.page.pageSize : page.pageSize,
+                startLikeNum: this.likeNumRange === null ? null : this.likeNumRange[0] ? this.likeNumRange[0]:0,
+                endLikeNum: this.likeNumRange === null ? null : this.likeNumRange[1] ? this.likeNumRange[1]:0,
+                startCommNum: this.commNumRange === null ? null : this.commNumRange[0] ? this.commNumRange[0]:0,
+                endCommNum: this.commNumRange === null ? null : this.commNumRange[1] ? this.commNumRange[1]:0,
+                startFansNum: this.fansNumRange === null ? null : this.fansNumRange[0] ? this.fansNumRange[0]:0,
+                endFansNum: this.fansNumRange === null ? null : this.fansNumRange[1] ? this.fansNumRange[1]:0,
+                startPublishTime: this.publishTimeDateRange === null ? null : this.publishTimeDateRange[0] ? this.publishTimeDateRange[0]:null,
+                endPublishTime: this.publishTimeDateRange === null ? null : this.publishTimeDateRange[1] ? this.publishTimeDateRange[1]:null,
+                shopId: this.$store.state.user.shopId,
+              },
+              this.searchForm
+            )
+          )
+        }).then(({data}) => {
+          this.dataList = data.records
+          this.page.total = data.total
+          this.dataListLoading = false
+        })
+      },
+      querySearch (queryString, cb) {
+        var restaurants = this.videoPlatformList
+        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+        // 调用 callback 返回建议列表的数据
+        cb(results)
+      },
+      createFilter (queryString) {
+        return (restaurant) => {
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+        }
+      },
+      setDateRange(val) {
+        var startDay = null
+        var endDay = null
+        if (val === 1) {
+          startDay = 0
+          endDay = 0
+        } else if (val === 2) {
+          startDay = -1
+          endDay = -1
+        } else if (val === 3) {
+          startDay = -3
+          endDay = -1
+        } else if (val === 4) {
+          startDay = -5
+          endDay = -1
+        } else {
+          return
+        }
+        // 开始时间
+        let startTime = moment().add(startDay, 'days').startOf('days').format('LL')
+        // 结束时间
+        let endTime = moment().add(endDay, 'days').endOf('days').format('LL')
+        this.publishTimeDateRange = [startTime, endTime]
+      },
+      // 新增 / 修改
+      addOrUpdateHandle (id) {
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id)
+        })
+      },
+      deleteHandle (id) {
+        this.$confirm(this.$i18n.t('admin.isDeleOper') + '?', this.$i18n.t('text.tips'), {
+          confirmButtonText: this.$i18n.t('crud.filter.submitBtn'),
+          cancelButtonText: this.$i18n.t('crud.filter.cancelBtn'),
+          type: 'warning'
+        }).then(() => {
+          this.$http({
+            url: this.$http.adornUrl('/promotion/promotionVideo/' + id),
+            method: 'delete',
+            data: this.$http.adornData({})
+          }).then(({ data }) => {
+            this.$message({
+              message: this.$i18n.t('publics.operation'),
+              type: 'success',
+            })
+            this.refreshChange()
+          })
+        }).catch(() => { })
+      },
+      // 刷新回调
+      refreshChange () {
+        // this.page.currentPage = 1
+        this.getDataList(this.page)
+      },
+      searchChange (params) {
+        this.page.currentPage = 1
+        this.getDataList(null)
+      },
+      handleSizeChange (val) {
+        this.page.pageSize = val
+        this.getDataList()
+      },
+      handleCurrentChange (val) {
+        this.page.currentPage = val
+        this.getDataList()
+      }
     }
   }
-}
 </script>
 <style lang="scss">
-.mod-print-promotionVideo {
-}
+  .mod-print-promotionVideo {
+  }
 </style>