feat: 企微工具 - 剧集管理 - "列表"前端页面

project/src/components/assembly/screen/channel.vue

@@ -174,12 +174,33 @@ export default {
     } else if (this.type == 'adqAccount') { // adq 账号选项
       this.getAdqAccountList()
       this.placeholderVal = 'ADQ账号'
+    } else if (this.type == 'platform') { // 平台选项
+      this.getPlatformList()
+      this.placeholderVal = '请选择平台'
     } else {
       this.init()
     }
 
   },
   methods: {
+    getPlatformList() { // 平台选项
+      this.$axios.get(this.URL.BASEURL + this.URL.adqAccount_list, {
+        params: {
+          is_select: 1
+        }
+      }).then((res) => {
+        var res = res.data
+        if (res && res.errno == 0) {
+          this.options = res.rst
+          this.options.forEach((item) => {
+            item.val = item.account_id
+            item.key = item.account_id
+          });
+        } else if (res.errno != 4002) {
+        }
+      }).catch((err) => {
+      });
+    },
     getAdqAccountList() { // ADQ账号选项
       this.$axios.get(this.URL.BASEURL + this.URL.adqAccount_list, {
         params: {

project/src/components/manage/playletManage/dialog/playletSendDialog.vue

@@ -0,0 +1,199 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="addMiniPro-dialog"
+    :title="dialogTitle"
+    width="450px"
+  >
+    <div class="form-wrap" v-loading="loading">
+      <div class="form-item">
+        <span class="lable"><em>*</em>小程序名称</span>
+        <el-input v-model="form.miniProName" size="small" placeholder="请输入小程序名称" clearable />
+      </div>
+      <div class="form-item">
+        <span class="lable"><em>*</em>APPID</span>
+        <el-input v-model="form.miniProAppid" size="small" placeholder="请输入APPID" clearable />
+      </div>
+      <div class="form-item">
+        <span class="lable"><em>*</em>所属平台</span>
+        <el-select v-model="form.platform" size="small" placeholder="请选择所属平台" clearable filterable>
+          <el-option v-for="item in platformOptions" :key="item.account_id" :label="item.account_id" :value="item.account_id" />
+        </el-select>
+      </div>
+      <div class="form-item">
+        <span class="lable"><em>*</em>是否启用</span>
+        <el-switch v-model="form.accountEnable" active-color="#43B083" :active-value="1"  inactive-color="#ccc" :inactive-value="0" />
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleCancel">取 消</el-button>
+      <el-button size="mini" type="primary" @click="handleConfirm" :disabled="loading">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "addMiniProDialog",
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    // 小程序信息
+    miniProInfo: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      platformOptions: [], // 平台选项
+      form: {
+        miniProName: '', // 小程序名称
+        miniProAppid: '', // APPID
+        platform: '', // 所属平台
+        accountEnable: 1, // 是否启用
+      }
+    }
+  },
+  computed: {
+    // 当前操作是否为"编辑"
+    isEdit() {
+      return this.miniProInfo && this.miniProInfo.id
+    },
+    // 弹框标题
+    dialogTitle() {
+      return this.isEdit ? '编辑小程序' : '添加小程序'
+    }
+  },
+  watch: {
+    dialogVisible(isShow) {
+      // 弹框显示 => 初始化表单数据
+      if (isShow) {
+        this.handleGetPlatformOptions()
+        this.handleInitData()
+      }
+    },
+  },
+  methods: {
+    // 获取平台选项列表
+    async handleGetPlatformOptions() {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.adqAccount_list, {
+        params: {
+          is_select: 1
+        }
+      })
+      if (res && res.errno == 0) {
+        this.platformOptions = res.rst
+      } else if (res.errno != 4002) {
+        this.$message.warning(res.err)
+      }
+    },
+    // 获取弹框表单数据
+    handleInitData() {
+      this.loading = false
+      if (this.isEdit) { // 编辑
+        const { miniProName, miniProAppid, platform, accountEnable } = this.miniProInfo
+        this.form.miniProName = miniProName
+        this.form.miniProAppid = miniProAppid
+        this.form.platform = platform
+        this.form.accountEnable = accountEnable
+      } else { // 新建
+        this.form.miniProName = ''
+        this.form.miniProAppid = ''
+        this.form.platform = ''
+        this.form.accountEnable = 1
+      }
+    },
+    async handleConfirm() {
+      console.log('handleConfirm => ')
+      try {
+        // 表单校验
+        await this.handleFormValidate()
+        let url = `${this.URL.BASEURL}${this.URL.xxx}`
+        const params = { ...this.form }
+
+        if (this.isEdit) { // 编辑操作
+          url = `${this.URL.BASEURL}${this.URL.xxx}`
+          params.id = this.miniProInfo.id
+        }
+
+        console.log('url => ', url)
+        console.log('params => ', params)
+        this.$emit('confirm', { isEdit: this.isEdit }) // mock
+        return // mock
+
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.$message.success('操作成功')
+          this.$emit('confirm', { isEdit: this.isEdit })
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCancel() {
+      this.$emit('cancel')
+    },
+    // 执行表单校验
+    handleFormValidate() {
+      return new Promise((resolve, reject) => {
+        const { miniProName, miniProAppid, platform } = this.form
+        if (!miniProName) {
+          this.$message.warning('请输入小程序名称')
+          reject('表单校验未通过')
+        } else if (!miniProAppid) {
+          this.$message.warning('请输入APPID')
+          reject('表单校验未通过')
+        } else if (!platform) {
+          this.$message.warning('请选择平台')
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.addMiniPro-dialog {
+  .form-wrap {
+    padding: 0 10px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 82px;
+        margin-right: 16px;
+        font-weight: 500;
+        flex-shrink: 0;
+        text-align: right;
+        em {
+          color: red;
+        }
+      }
+      .el-select {
+        width: 100%;
+      }
+    }
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>

project/src/components/manage/playletManage/playletManage.vue

@@ -0,0 +1,182 @@
+<template>
+  <div v-loading="loading" class="playletManage-wrap">
+    <div class="screenBox flex">
+      <div class="flex">
+        <selfChannel title="平台" type="platform" labelWidth @channelDefine="onChangePlatform" />
+        <selfInput label_name="搜索剧集" @inputChange="onInputKeyword" />
+      </div>
+      <div class="right">
+        <!-- 占位 -->
+      </div>
+    </div>
+    <el-table :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">
+        <template slot-scope="{ row }">
+          <span class="playlet-name">{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="封面" prop="name" min-width="160" align="center">
+        <template slot-scope="{ row }">
+          <el-image style="width: 60px;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']" />
+        </template>
+      </el-table-column>
+      <el-table-column label="平台" prop="name" min-width="160" align="center" />
+      <el-table-column label="账号" prop="name" min-width="160" align="center" />
+      <el-table-column label="分类" prop="name" min-width="160" align="center" />
+      <el-table-column label="集数" prop="name" min-width="160" align="center" />
+      <el-table-column label="发布时间" prop="created_at" min-width="160" align="center" />
+      <el-table-column label="状态" min-width="160" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.enable == 1" class="status">已完结</span>
+          <span v-else class="status">连载中</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" min-width="100" align="center" fixed="right">
+        <template slot-scope="{ row }">
+          <span class="btn" @click="onClickCreateGroupSend(row)">创建群发</span>
+        </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"
+      @confirm="handlePlayletSendConfirm"
+      @cancel="handlePlayletSendCancel"
+    />
+    <!-- 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'
+export default {
+  name: 'playletManage',
+  components: {
+    selfChannel,
+    selfInput,
+    playletSendDialog,
+  },
+  data () {
+    return {
+      height: '',
+      loading: false,
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        platform: '',
+        keyword: '',
+      },
+      playletList: [],
+
+      playletSendDialogVisible: false, // 控制"添加账号"弹框显示
+      currentPlayletInfo: {}, // 当前编辑的账号信息
+    }
+  },
+  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.pitcher_dramaList}`
+        const params = {
+          is_select: 0,
+          platform: this.filter.platform,
+          keyword: this.filter.keyword,
+          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;
+        } 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()
+    },
+    // 监听"平台"筛选变化
+    onChangePlatform(val) {
+      this.filter.platform = val || ''
+      this.pagination.page = 1
+      this.handleGetPlaylet()
+    },
+    // 监听"搜索小程序"变化
+    onInputKeyword(val) {
+      this.filter.keyword = val || ''
+      this.pagination.page = 1
+      this.handleGetPlaylet()
+    },
+
+    // S 创建群发
+    // 监听点击"创建群发"
+    onClickCreateGroupSend(playletInfo) {
+      this.currentPlayletInfo = playletInfo
+      this.playletSendDialogVisible = true
+    },
+    // 创建群发 => 确定
+    handlePlayletSendConfirm() {
+      console.log('handlePlayletSendConfirm => ')
+      this.playletSendDialogVisible = false
+      this.handleGetPlaylet()
+    },
+    // 创建群发 => 取消
+    handlePlayletSendCancel() {
+      this.playletSendDialogVisible = false
+    },
+    // E 创建群发
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+.playletManage-wrap {
+  .playlet-name {
+    color: #32B38A;
+    // cursor: pointer;
+  }
+  .status {
+    margin: 2px auto;
+    padding: 0 6px;
+    color: #32B38A;
+    border: 1px solid #32B38A;
+  }
+  .btn {
+    color: #32B38A;
+    cursor: pointer;
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -66,6 +66,8 @@ const loseUserTrends = () => import(/* webpackChunkName: 'loseUserTrends' */ '@/
 const accountManage = () => import(/* webpackChunkName: 'accountManage' */ '@/components/manage/accountManage/accountManage.vue')
 // 小程序管理
 const miniProManage = () => import(/* webpackChunkName: 'miniProManage' */ '@/components/manage/miniProManage/miniProManage.vue')
+// 企微助手 - 剧集管理
+const playletManage = () => import(/* webpackChunkName: 'playletManage' */ '@/components/manage/playletManage/playletManage.vue')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
@@ -338,6 +340,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'playletManage',
+        name: 'playletManage',
+        component: playletManage,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '助手剧集管理'
+        }
+      },
+      {
         path: 'memberManage',
         name: 'memberManage',
         component: memberManage,