playlet/project/src/components/manage/playletManag.../playletManag...

<template>
  <div v-loading="loading" class="playletManage-wrap">
    <div class="screenBox flex">
      <div class="flex">
        <selfChannel title="平台" type="platform" labelWidth @channelDefine="onChangePlatform" />
        <div class="flex" style="margin-left: 30px;">
          <span style="font-size: 14px; color: #666; margin-right: 8px;">账号</span>
          <el-select class="select-cls" v-model="filter.account_id" size="small" placeholder="平台账号" clearable filterable :style="{width: '210px'}" @change="onChangeAccountId">
            <el-option v-for="item in accountOptions" :key="item.account_id" :label="item.account" :value="item.account_id" />
          </el-select>
        </div>
        <selfInput label_name="搜索剧集" @inputChange="onInputKeyword" />
      </div>
      <div class="right">
        <el-badge :value="playletList_selected.length" :hidden="playletList_selected.length < 1">
          <el-button type="primary" plain size="mini" @click="onClickCreatePlayletGroup">创建组</el-button>
        </el-badge>
      </div>
    </div>
    <el-table ref="tableDom" :height="height" :data="playletList" tooltip-effect="dark" style="width: 100%;margin-top:10px">
      <el-table-column label="剧名" prop="name" min-width="160" align="center" fixed="left" />
      <el-table-column label="封面" min-width="160" align="center">
        <template slot-scope="{ row }">
          <el-image style="width: 40px; height: 60px;" :src="row.cover_url" :preview-src-list="[row.cover_url]" />
        </template>
      </el-table-column>
      <el-table-column label="平台" prop="platform_name" min-width="160" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.platform_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" prop="account" min-width="160" align="center" />
      <el-table-column label="分类" prop="category" min-width="160" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.category || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="集数" prop="section_count" min-width="160" align="center" />
      <el-table-column label="发布时间" prop="create_date" min-width="160" align="center" />
      <el-table-column label="状态" min-width="160" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.finish_state == 1" class="status">已完结</span>
          <span v-else class="status">连载中</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="210" align="center" fixed="right">
        <template slot-scope="{ row }">
          <span class="btn" @click="onClickCreateSend(row, { jumpPath: routePathType.GROUP_SEND })">创建群发</span>
          <span class="btn" @click="onClickCreateSend(row, { jumpPath: routePathType.WELCOME_MSG })">创建欢迎语</span>
          <template>
            <span v-if="handleGetIsSelected(row)" class="btn disabled">已加入</span>
            <span v-else class="btn" @click="onClickSelectPlaylet(row)">加入剧组</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-show="pagination.total > 0">
      <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count="Number(pagination.pages)">
      </el-pagination>
    </div>

    <!-- S 创建群发 -->
    <playletSendDialog
      :dialogVisible="playletSendDialogVisible"
      :playletInfo="currentPlayletInfo"
      :isCreateGroup="isCreateGroup"
      @confirm="handlePlayletSendConfirm"
      @cancel="handlePlayletSendCancel"
    />
    <!-- E 创建群发 -->

    <!-- S 创建组 -->
    <groupDialog
      :dialogVisible="groupDialogVisible"
      :selectedPlayletListFromProps="playletList_selected"
      @confirm="onConfirmGroupDialog"
      @cancel="onCancelGroupDialog"
    />
    <!-- E 创建组 -->
  </div>
</template>
<script>
import selfChannel from '@/components/assembly/screen/channel.vue'
import selfInput from '@/components/assembly/screen/input.vue'
import playletSendDialog from './dialog/playletSendDialog.vue'
import groupDialog from './dialog/groupDialog.vue'
import { pageFromType, routePathType } from '@/assets/js/staticTypes'
export default {
  name: 'playletManage',
  components: {
    selfChannel,
    selfInput,
    playletSendDialog,
    groupDialog,
  },
  data () {
    return {
      routePathType,
      height: '',
      loading: false,
      pagination: {
        page: 1,
        page_size: 20,
        pages: 0,
        total: 0,
      },
      filter: {
        platform_id: '',
        account_id: '',
        keyword: '',
      },
      playletList: [],
      accountOptions: [], // 账号选项

      playletSendDialogVisible: false, // 控制"添加账号"弹框显示
      currentPlayletInfo: {}, // 当前编辑的账号信息
      currentJumpRoutePath: '', // 当前路由跳转路径 创建群发 & 创建欢迎语
      isCreateGroup: false, // 当前操作是否为“加入剧组”

      playletList_selected: [], // 当前已选的短剧列表数据
      groupDialogVisible: false, // 控制"创建组"弹框显示
    }
  },
  created () {
    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
    this.handleGetPlaylet()
  },
  methods: {
    // 获取列表数据
    async handleGetPlaylet() {
      try {
        this.loading = true
        const url = `${this.URL.BASEURL}${this.URL.playletManage_playletList}`
        const params = {
          platform_id: this.filter.platform_id,
          keyword: this.filter.keyword,
          account_id: this.filter.account_id,
          page: this.pagination.page,
          page_size: this.pagination.page_size,
        }
        const { data: res = {} } = await this.$axios.get(url, { params })
        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
          this.playletList = res.rst.data;
          this.pagination.total = res.rst.pageInfo.total;
          this.pagination.pages = res.rst.pageInfo.pages;
          this.$refs.tableDom.bodyWrapper.scrollTop = 0
        } else if (res.errno != 4002) {
          this.$message.warning(res.err)
          this.playletList = [];
          this.pagination.total = 0;
          this.pagination.pages = 0;
        }
      } catch (error) {
        console.log(error)
        this.playletList = [];
        this.pagination.total = 0;
        this.pagination.pages = 0;
      } finally {
        this.loading = false
      }
    },
    // 监听当前页数变化
    handleCurrentChange(currentPage) {
      this.pagination.page = currentPage
      this.handleGetPlaylet()
    },
    // 监听"平台"筛选变化
    async onChangePlatform(val) {
      this.filter.platform_id = val || ''

      // 清空“账号”筛选值 => 根据最新平台值 获取 账号选项
      this.filter.account_id = ''
      this.accountOptions = []
      if (this.filter.platform_id) {
        this.handleGetAccountOptions()
      }

      await this.$nextTick()
      this.pagination.page = 1
      this.handleGetPlaylet()
    },
    // 监听"账号"筛选变化
    onChangeAccountId(val) {
      this.filter.account_id = val || ''
      this.pagination.page = 1
      this.handleGetPlaylet()
    },
    // 监听"搜索剧集"变化
    onInputKeyword(val) {
      this.filter.keyword = val || ''
      this.pagination.page = 1
      this.handleGetPlaylet()
    },
    // 获取账号选项列表
    async handleGetAccountOptions() {
      const { data: res = {} } = await this.$axios.post(this.URL.BASEURL + this.URL.playletManage_accountList, {
        platform_id: this.filter.platform_id
      })
      if (res && res.errno == 0) {
        this.accountOptions = res.rst
      } else if (res.errno != 4002) {
        this.$message.warning(res.err)
      }
    },

    // 获取当前短剧“已加入”状态
    handleGetIsSelected(row) {
      return this.playletList_selected.find(item => item.playlet_id === row.playlet_id)
    },
    // S 创建群发、"创建欢迎语"
    // 监听点击"创建群发"、"创建欢迎语"
    onClickCreateSend(playletInfo, { jumpPath }) {
      this.isCreateGroup = false
      this.currentPlayletInfo = playletInfo
      this.currentJumpRoutePath = jumpPath
      this.playletSendDialogVisible = true
    },
    // 监听点击“加入剧组”
    onClickSelectPlaylet(playletInfo) {
      this.isCreateGroup = true
      this.currentPlayletInfo = playletInfo
      this.currentJumpRoutePath = ''
      this.playletSendDialogVisible = true
    },
    // 创建群发 => 确定
    handlePlayletSendConfirm({ miniProPath, miniProAppId, miniProDesc, miniProCover, h5Path, h5Desc, h5Cover, link_type }) {
      console.log('handlePlayletSendConfirm => ')
      this.playletSendDialogVisible = false
      this.handleGetPlaylet()

      if (this.currentJumpRoutePath) { // 有跳转路径 => 跳转"客户群发"&&新建群发 || "创建欢迎语"&&新建欢迎语
        if (link_type === 1) { // H5推广链接
          const path = this.$router.resolve({
            path: this.currentJumpRoutePath,
            query: {
              from: pageFromType.PLAYLET_LINK_H5,
              h5Path: encodeURIComponent(h5Path),
              h5Desc: encodeURIComponent(h5Desc),
              h5Cover: encodeURIComponent(h5Cover),
            }
          })
          window.open(path.href, '_blank')
        } else if (link_type === 0) { // 小程序链接
          const path = this.$router.resolve({
            path: this.currentJumpRoutePath,
            query: {
              from: pageFromType.PLAYLET_LINK_MINIAPP,
              miniProPath: encodeURIComponent(miniProPath),
              miniProAppId: encodeURIComponent(miniProAppId),
              miniProDesc: encodeURIComponent(miniProDesc),
              miniProCover: encodeURIComponent(miniProCover),
            }
          })
          window.open(path.href, '_blank')
        }
      } else { // 没有跳转路径 => 加入剧组
        this.playletList_selected.push({
          ...this.currentPlayletInfo,
          miniProPath,
          miniProAppId,
          miniProDesc,
          miniProCover,
          h5Path,
          h5Desc,
          h5Cover,
          link_type,
        })
      }
    },
    // 创建群发 => 取消
    handlePlayletSendCancel() {
      this.playletSendDialogVisible = false
    },
    // E 创建群发

    // 监听点击“创建组”
    onClickCreatePlayletGroup() {
      this.groupDialogVisible = true
    },
    onConfirmGroupDialog() {
      this.groupDialogVisible = false
    },
    onCancelGroupDialog() {
      this.groupDialogVisible = false
    },
  }
}
</script>
<style lang="scss" scoped>
.screenBox {
  background: #fff;
  padding: 5px 20px;
  .right {
    padding-right: 14px;
  }
}
/deep/ .el-select .el-input.is-focus .el-input__inner,
/deep/ .el-select .el-input__inner:focus {
  border-color: #DCDFE6;
}
.playletManage-wrap {
  .select-cls {
    /deep/ .el-input__suffix {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border: 1px solid #DCDFE6;
      right: 0;
      width: 30px;
      background-color: #F1F1F1;
      .el-input__icon {
        color: #909399;
      }
    }
  }
  .playlet-name {
    color: #32B38A;
    // cursor: pointer;
  }
  .status {
    margin: 2px auto;
    padding: 0 6px;
    color: #32B38A;
    border: 1px solid #32B38A;
  }
  .btn {
    color: #32B38A;
    cursor: pointer;
    margin-right: 4px;
    &.disabled {
      color: #999;
      cursor: not-allowed;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>