feat: 企微工具 - 小程序管理 - "列表"前端页面

project/src/components/manage/accountManage/accountManage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading" class="platformManage-wrap">
+  <div v-loading="loading" class="accountManage-wrap">
     <div class="screenBox flex">
       <div></div><!-- 占位 -->
       <div class="right">
@@ -34,7 +34,7 @@
       </el-table-column>
       <el-table-column label="操作" min-width="160" align="center">
         <template slot-scope="{ row }">
-          <el-button type="primary" size="mini" @click="onClickEditPlatform(row)">编辑</el-button>
+          <el-button type="primary" size="mini" @click="onClickEditAccount(row)">编辑</el-button>
           <el-button v-if="row.enable == 1" type="danger" size="mini" @click="onClickEnable(row, 0)">禁用</el-button>
           <el-button v-else type="primary" size="mini" @click="onClickEnable(row, 1)">启用</el-button>
         </template>
@@ -49,25 +49,25 @@
     <addAccountDialog
       :dialogVisible="addAccountDialogVisible"
       :accountInfo="currentAccountInfo"
-      @confirm="handleAddPlatformConfirm"
-      @cancel="handleAddPlatformCancel"
+      @confirm="handleAddAccountConfirm"
+      @cancel="handleAddAccountCancel"
     />
     <!-- E 添加账号 & 编辑账号 -->
 
-    <!-- S 短剧列表 & 编辑账号 -->
+    <!-- S 短剧列表 -->
     <playletListDialog
       :dialogVisible="playletListDialogVisible"
       :accountInfo="currentAccountInfo"
       @close="handlePlayletListClose"
     />
-    <!-- E 短剧列表 & 编辑账号 -->
+    <!-- E 短剧列表 -->
   </div>
 </template>
 <script>
 import addAccountDialog from './dialog/addAccountDialog.vue'
 import playletListDialog from './dialog/playletListDialog.vue'
 export default {
-  name: 'platformManage',
+  name: 'accountManage',
   components: {
     addAccountDialog,
     playletListDialog,
@@ -138,18 +138,18 @@ export default {
       this.addAccountDialogVisible = true
     },
     // 监听点击"编辑账号"
-    onClickEditPlatform(accountInfo) {
+    onClickEditAccount(accountInfo) {
       this.currentAccountInfo = accountInfo
       this.addAccountDialogVisible = true
     },
     // 添加账号 & 编辑账号 => 确定
-    handleAddPlatformConfirm({ isEdit }) {
+    handleAddAccountConfirm({ isEdit }) {
       this.addAccountDialogVisible = false
       if (!isEdit) this.pagination.page = 1
       this.handleGetAccount()
     },
     // 添加账号 & 编辑账号 => 取消
-    handleAddPlatformCancel() {
+    handleAddAccountCancel() {
       this.addAccountDialogVisible = false
     },
     // E 添加 & 编辑账号
@@ -220,7 +220,7 @@ export default {
   background: #fff;
   padding: 5px 20px;
 }
-.platformManage-wrap {
+.accountManage-wrap {
   .playlet-num {
     cursor: pointer;
     color: #32B38A;

project/src/components/manage/miniProManage/dialog/addMiniProDialog.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="addAccount-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.accountNumber" size="small" placeholder="请输入账号" 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">描述</span>
+        <el-input v-model="form.accountDesc" size="small" placeholder="请输入描述" clearable />
+      </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: "addAccountDialog",
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    // 账号信息
+    accountInfo: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      platformOptions: [], // 平台选项
+      form: {
+        accountNumber: '', // 账号
+        platform: '', // 平台
+        accountDesc: '', // 描述
+        accountEnable: 1, // 是否启用
+      }
+    }
+  },
+  computed: {
+    // 当前操作是否为"编辑"
+    isEdit() {
+      return this.accountInfo && this.accountInfo.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 { accountNumber, platform, accountDesc, accountEnable } = this.accountInfo
+        this.form.accountNumber = accountNumber
+        this.form.platform = platform
+        this.form.accountDesc = accountDesc
+        this.form.accountEnable = accountEnable
+      } else { // 新建
+        this.form.accountNumber = ''
+        this.form.platform = ''
+        this.form.accountDesc = ''
+        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.accountInfo.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 { accountNumber, platform } = this.form
+        if (!accountNumber) {
+          this.$message.warning('请输入账号')
+          reject('表单校验未通过')
+        } else if (!platform) {
+          this.$message.warning('请选择平台')
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.addAccount-dialog {
+  .form-wrap {
+    padding: 0 10px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 70px;
+        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/miniProManage/miniProManage.vue

@@ -0,0 +1,198 @@
+<template>
+  <div v-loading="loading" class="miniProManage-wrap">
+    <div class="screenBox flex">
+      <div class="flex">
+        <selfInput label_name="搜索小程序" @inputChange="onInputKeyword" />
+      </div>
+      <div class="right">
+        <el-button type="primary" size="mini" @click="onClickAddMiniPro">添加小程序</el-button>
+      </div>
+    </div>
+    <el-table :height="height" :data="miniProList" tooltip-effect="dark" style="width: 100%;margin-top:10px">
+      <el-table-column label="小程序" prop="name" min-width="200" align="center" />
+      <el-table-column label="APPID" prop="name" min-width="200" 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="c-448AFF">启用</span>
+          <span v-else class="c-F03F5C">禁用</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" min-width="160" align="center">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" @click="onClickEditMiniPro(row)">编辑</el-button>
+          <el-button v-if="row.enable == 1" type="danger" size="mini" @click="onClickEnable(row, 0)">禁用</el-button>
+          <el-button v-else type="primary" size="mini" @click="onClickEnable(row, 1)">启用</el-button>
+        </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 添加小程序 & 编辑小程序 -->
+    <addMiniProDialog
+      :dialogVisible="addMiniProDialogVisible"
+      :miniProInfo="currentMiniProInfo"
+      @confirm="handleAddMiniProConfirm"
+      @cancel="handleAddMiniProCancel"
+    />
+    <!-- E 添加小程序 & 编辑小程序 -->
+  </div>
+</template>
+<script>
+import selfInput from '@/components/assembly/screen/input.vue'
+import addMiniProDialog from './dialog/addMiniProDialog.vue'
+export default {
+  name: 'miniProManage',
+  components: {
+    selfInput,
+    addMiniProDialog,
+  },
+  data () {
+    return {
+      height: '',
+      loading: false,
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        keyword: '',
+      },
+      miniProList: [],
+
+      addMiniProDialogVisible: false, // 控制"添加账号"弹框显示
+      currentMiniProInfo: {}, // 当前编辑的账号信息
+    }
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+    this.handleGetMiniPro()
+  },
+  methods: {
+    // 获取列表数据
+    async handleGetMiniPro() {
+      try {
+        this.loading = true
+        const url = `${this.URL.BASEURL}${this.URL.pitcher_dramaList}`
+        const params = {
+          is_select: 0,
+          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.miniProList = 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.miniProList = [];
+          this.pagination.total = 0;
+          this.pagination.pages = 0;
+        }
+      } catch (error) {
+        console.log(error)
+        this.miniProList = [];
+        this.pagination.total = 0;
+        this.pagination.pages = 0;
+      } finally {
+        this.loading = false
+      }
+    },
+    // 监听当前页数变化
+    handleCurrentChange(currentPage) {
+      this.pagination.page = currentPage
+      this.handleGetMiniPro()
+    },
+    // 监听搜索小程序变化
+    onInputKeyword(val) {
+      console.log('onInputKeyword => ', val)
+      this.filter.keyword = val || ''
+      this.pagination.page = 1
+      this.handleGetMiniPro()
+    },
+
+    // S 添加 & 编辑账号
+    // 监听点击"添加账号"
+    onClickAddMiniPro() {
+      this.currentMiniProInfo = {}
+      this.addMiniProDialogVisible = true
+    },
+    // 监听点击"编辑账号"
+    onClickEditMiniPro(miniProInfo) {
+      this.currentMiniProInfo = miniProInfo
+      this.addMiniProDialogVisible = true
+    },
+    // 添加小程序 & 编辑小程序 => 确定
+    handleAddMiniProConfirm({ isEdit }) {
+      this.addMiniProDialogVisible = false
+      if (!isEdit) this.pagination.page = 1
+      this.handleGetMiniPro()
+    },
+    // 添加小程序 & 编辑小程序 => 取消
+    handleAddMiniProCancel() {
+      this.addMiniProDialogVisible = false
+    },
+    // E 添加 & 编辑账号
+
+    // S 禁用、启用平台
+    // 监听点击"禁用"、"启用"按钮
+    async onClickEnable(currentAccount, eventCode) {
+      try {
+        const h = this.$createElement
+        await this.$confirm('', {
+          message:h('div', null, [
+            h('span', null, `确定${eventCode === 0 ? '禁用' : '启用'}`),
+            h('span', { style:'color: #32B38A;' }, `${currentAccount.name}`),
+            h('span', null, '吗？'),
+          ]),
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        this.handleEnable(currentAccount, eventCode)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 执行"禁用"、"启用"
+    async handleEnable(currentAccount, eventCode) {
+      try {
+        let url = `${this.URL.BASEURL}${this.URL.xxx}`
+        const params = {
+          id: currentAccount.id,
+          enable: eventCode,
+        }
+        console.log('url => ', url)
+        console.log('params => ', params)
+        return // mock
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.$message.success('操作成功')
+          this.handleGetMiniPro()
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    // E 禁用、启用平台
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+</style>

project/src/router/allRouter.js

@@ -64,6 +64,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')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
@@ -326,6 +328,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'miniProManage',
+        name: 'miniProManage',
+        component: miniProManage,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '小程序管理'
+        }
+      },
+      {
         path: 'memberManage',
         name: 'memberManage',
         component: memberManage,