feat: 企微工具 - 平台账号管理 - 相关页面修改

project/src/components/manage/platformManage/platformManage.vue

@@ -3,21 +3,22 @@
     <div class="screenBox flex">
       <div></div><!-- 占位 -->
       <div class="right">
-        <el-button type="primary" size="mini" @click="onClickAddPlatform">添加平台</el-button>
+        <el-button type="primary" size="mini" @click="onClickAddAccount">添加账号</el-button>
       </div>
     </div>
-    <el-table :height="height" :data="platformList" tooltip-effect="dark" style="width: 100%;margin-top:10px">
+    <el-table :height="height" :data="accountList" tooltip-effect="dark" style="width: 100%;margin-top:10px">
+      <el-table-column label="账号" min-width="200" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.name }}</span>
+          <el-tooltip content="账号未激活，请联系开发人员激活账号" placement="top">
+            <span><i class="el-icon-warning-outline" style="color: red;" /></span>
+          </el-tooltip>
+        </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="账号" min-width="300" align="center">
+      <el-table-column label="描述" prop="name" min-width="160" align="center">
         <template slot-scope="{ row }">
-          <div v-for="item in 3" :key="item" class="account-wrap">
-            <span>{{ item }}<i class="del-btn el-icon-delete" @click="onClickDelAccount({ platform: row, delItem: item })" /></span>
-          </div>
-          <div class="account-add-btn" @click="onClickAddAccount(row)">
-            <i class="el-icon-plus" />
-            <span>添加账号</span>
-          </div>
+          <span>{{ row.name || '-' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="状态" min-width="160" align="center">
@@ -26,6 +27,11 @@
           <span v-else class="c-F03F5C">禁用</span>
         </template>
       </el-table-column>
+      <el-table-column label="关联短剧数量" min-width="160" align="center">
+        <template slot-scope="{ row }">
+          <span class="playlet-num">{{ row.name }}</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="onClickEditPlatform(row)">编辑</el-button>
@@ -39,32 +45,21 @@
       </el-pagination>
     </div>
 
-    <!-- S 添加平台 & 编辑平台 -->
-    <addPlatformDialog
-      :dialogVisible="addPlatformDialogVisible"
-      :platformInfo="currentPlatformInfo"
-      @confirm="handleAddPlatformConfirm"
-      @cancel="handleAddPlatformCancel"
-    />
-    <!-- E 添加平台 & 编辑平台 -->
-
-    <!-- S 添加账号 -->
+    <!-- S 添加账号 & 编辑账号 -->
     <addAccountDialog
       :dialogVisible="addAccountDialogVisible"
-      :platformId="currentAccountPlatformId"
-      @confirm="handleAddAccountConfirm"
-      @cancel="handleAddAccountCancel"
+      :accountInfo="currentAccountInfo"
+      @confirm="handleAddPlatformConfirm"
+      @cancel="handleAddPlatformCancel"
     />
-    <!-- E 添加账号 -->
+    <!-- E 添加账号 & 编辑账号 -->
   </div>
 </template>
 <script>
-import addPlatformDialog from './dialog/addPlatformDialog.vue'
 import addAccountDialog from './dialog/addAccountDialog.vue'
 export default {
   name: 'platformManage',
   components: {
-    addPlatformDialog,
     addAccountDialog,
   },
   data () {
@@ -77,13 +72,10 @@ export default {
         pages: 0,
         total: 0,
       },
-      platformList: [],
-
-      addPlatformDialogVisible: false, // 控制"添加平台"弹框显示
-      currentPlatformInfo: {}, // 当前编辑的平台信息
+      accountList: [],
 
       addAccountDialogVisible: false, // 控制"添加账号"弹框显示
-      currentAccountPlatformId: '', // 当前需要添加账号的平台id
+      currentAccountInfo: {}, // 当前编辑的账号信息
     }
   },
   created () {
@@ -103,18 +95,18 @@ export default {
         }
         const { data: res = {} } = await this.$axios.get(url, { params })
         if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
-          this.platformList = res.rst.data;
+          this.accountList = 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.platformList = [];
+          this.accountList = [];
           this.pagination.total = 0;
           this.pagination.pages = 0;
         }
       } catch (error) {
         console.log(error)
-        this.platformList = [];
+        this.accountList = [];
         this.pagination.total = 0;
         this.pagination.pages = 0;
       } finally {
@@ -127,72 +119,55 @@ export default {
       this.handleGetPlatform()
     },
 
-    // S 添加 & 编辑平台
-    // 监听点击"添加平台"
-    onClickAddPlatform() {
-      this.currentPlatformInfo = {}
-      this.addPlatformDialogVisible = true
-    },
-    // 监听点击"编辑平台"
-    onClickEditPlatform(platformInfo) {
-      this.currentPlatformInfo = platformInfo
-      this.addPlatformDialogVisible = true
-    },
-    // 添加平台 & 编辑平台 => 确定
-    handleAddPlatformConfirm() {
-      this.addPlatformDialogVisible = false
-      this.pagination.page = 1
-      this.handleGetPlatform()
-    },
-    // 添加平台 & 编辑平台 => 取消
-    handleAddPlatformCancel() {
-      this.addPlatformDialogVisible = false
-    },
-    // E 添加 & 编辑平台
-
-    // S 添加账号
+    // S 添加 & 编辑账号
     // 监听点击"添加账号"
-    onClickAddAccount(currentPlatform) {
-      this.currentAccountPlatformId = currentPlatform.id
+    onClickAddAccount() {
+      this.currentAccountInfo = {}
+      this.addAccountDialogVisible = true
+    },
+    // 监听点击"编辑账号"
+    onClickEditPlatform(accountInfo) {
+      this.currentAccountInfo = accountInfo
       this.addAccountDialogVisible = true
     },
-    // 添加账号账号 => 确定
-    handleAddAccountConfirm() {
+    // 添加账号 & 编辑账号 => 确定
+    handleAddPlatformConfirm({ isEdit }) {
       this.addAccountDialogVisible = false
+      if (!isEdit) this.pagination.page = 1
       this.handleGetPlatform()
     },
-    // 添加账号账号 => 取消
-    handleAddAccountCancel() {
+    // 添加账号 & 编辑账号 => 取消
+    handleAddPlatformCancel() {
       this.addAccountDialogVisible = false
     },
-    // E 添加账号
+    // E 添加 & 编辑账号
 
     // S 禁用、启用平台
     // 监听点击"禁用"、"启用"按钮
-    async onClickEnable(currentPlatform, eventCode) {
+    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;' }, `${currentPlatform.name}`),
+            h('span', { style:'color: #32B38A;' }, `${currentAccount.name}`),
             h('span', null, '吗？'),
           ]),
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
         })
-        this.handleEnable(currentPlatform, eventCode)
+        this.handleEnable(currentAccount, eventCode)
       } catch (error) {
         console.log(error)
       }
     },
     // 执行"禁用"、"启用"
-    async handleEnable(currentPlatform, eventCode) {
+    async handleEnable(currentAccount, eventCode) {
       try {
         let url = `${this.URL.BASEURL}${this.URL.xxx}`
         const params = {
-          id: currentPlatform.id,
+          id: currentAccount.id,
           enable: eventCode,
         }
         console.log('url => ', url)
@@ -213,57 +188,6 @@ export default {
       }
     },
     // E 禁用、启用平台
-
-    // S 删除账号
-    // 监听点击"删除"账号按钮
-    async onClickDelAccount({ platform, delItem }) {
-      console.log('platform => ', platform)
-      console.log('delItem => ', delItem)
-      try {
-        const h = this.$createElement
-        await this.$confirm('', {
-          message:h('div', null, [
-            h('span', null, `确定删除`),
-            h('span', { style:'color: #32B38A;' }, `${platform.name}`),
-            h('span', null, '平台的'),
-            h('span', { style:'color: #32B38A;' }, `${delItem}`),
-            h('span', null, '账号吗？'),
-          ]),
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-        this.handleDelAccount({ platform, delItem })
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    async handleDelAccount({ platform, delItem }) {
-      try {
-        let url = `${this.URL.BASEURL}${this.URL.xxx}`
-        const params = {
-          id: platform.id,
-          delItem: delItem,
-        }
-        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.handleGetPlatform()
-        } else if (res.errno != 4002) {
-          this.$message.warning(res.err || '操作失败')
-        }
-      } catch (error) {
-        console.log('error => ', error)
-      } finally {
-        this.loading = false
-      }
-    },
-    // E 删除账号
-
   }
 }
 </script>
@@ -273,33 +197,9 @@ export default {
   padding: 5px 20px;
 }
 .platformManage-wrap {
-  .account-wrap {
-    span {
-      position: relative;
-      i {
-        position: absolute;
-        right: -14px;
-        top: 3px;
-        display: none;
-        color: #F46C6C;
-        cursor: pointer;
-      }
-    }
-    &:hover {
-      i {
-        display: inline-block;
-      }
-    }
-  }
-  .account-add-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #32B38A;
+  .playlet-num {
     cursor: pointer;
-    i {
-      margin-right: 4px;
-    }
+    color: #32B38A;
   }
 }
 </style>

project/src/components/manage/platformManage/dialog/addAccountDialog.vue

@@ -11,6 +11,20 @@
         <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>
@@ -28,24 +42,28 @@ export default {
       type: Boolean,
       default: () => false
     },
-    // 账号所属的平台id
-    platformId: {
-      type: [String, Number],
-      default: () => ''
+    // 账号信息
+    accountInfo: {
+      type: Object,
+      default: () => ({})
     },
   },
   data() {
     return {
       loading: false,
+      platformOptions: [], // 平台选项
       form: {
         accountNumber: '', // 账号
+        platform: '', // 平台
+        accountDesc: '', // 描述
+        accountEnable: 1, // 是否启用
       }
     }
   },
   computed: {
     // 当前操作是否为"编辑"
     isEdit() {
-      return false // 暂时只有新建
+      return this.accountInfo && this.accountInfo.id
     },
     // 弹框标题
     dialogTitle() {
@@ -55,17 +73,40 @@ export default {
   watch: {
     dialogVisible(isShow) {
       // 弹框显示 => 初始化表单数据
-      isShow && this.handleInitData()
+      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() {
@@ -74,26 +115,23 @@ export default {
         // 表单校验
         await this.handleFormValidate()
         let url = `${this.URL.BASEURL}${this.URL.xxx}`
-        const params = {
-          ...this.form,
-          platformId: this.platformId
-        }
+        const params = { ...this.form }
 
-        // if (this.isEdit) { // 编辑操作
-        //   url = `${this.URL.BASEURL}${this.URL.xxx}`
-        //   params.id = this.platformInfo.id
-        // }
+        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') // mock
+        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')
+          this.$emit('confirm', { isEdit: this.isEdit })
         } else if (res.errno != 4002) {
           this.$message.warning(res.err || '操作失败')
         }
@@ -109,10 +147,13 @@ export default {
     // 执行表单校验
     handleFormValidate() {
       return new Promise((resolve, reject) => {
-        const { accountNumber } = this.form
+        const { accountNumber, platform } = this.form
         if (!accountNumber) {
           this.$message.warning('请输入账号')
           reject('表单校验未通过')
+        } else if (!platform) {
+          this.$message.warning('请选择平台')
+          reject('表单校验未通过')
         } else {
           resolve('表单校验通过')
         }
@@ -143,6 +184,9 @@ export default {
           color: red;
         }
       }
+      .el-select {
+        width: 100%;
+      }
     }
   }
   .dialog-footer {

project/src/components/manage/platformManage/dialog/addPlatformDialog.vue

@@ -1,164 +0,0 @@
-<template>
-  <el-dialog
-    :visible.sync="dialogVisible"
-    :before-close="handleCancel"
-    class="addPlatform-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.platformName" size="small" placeholder="请输入平台名称" clearable />
-      </div>
-      <div class="form-item">
-        <span class="lable">描述</span>
-        <el-input v-model="form.platformDesc" size="small" placeholder="请输入描述" clearable />
-      </div>
-      <div class="form-item">
-        <span class="lable"><em>*</em>是否启用</span>
-        <el-switch v-model="form.platformEnable" 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: "addPlatformDialog",
-  props: {
-    // 控制弹框是否显示
-    dialogVisible: {
-      type: Boolean,
-      default: () => false
-    },
-    // 平台信息
-    platformInfo: {
-      type: Object,
-      default: () => ({})
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      form: {
-        platformName: '', // 平台名称
-        platformDesc: '', // 描述
-        platformEnable: 1, // 是否启用
-      }
-    }
-  },
-  computed: {
-    // 当前操作是否为"编辑"
-    isEdit() {
-      return this.platformInfo && this.platformInfo.id
-    },
-    // 弹框标题
-    dialogTitle() {
-      return this.isEdit ? '编辑平台' : '添加平台'
-    }
-  },
-  watch: {
-    dialogVisible(isShow) {
-      // 弹框显示 => 初始化表单数据
-      isShow && this.handleInitData()
-    },
-  },
-  methods: {
-    // 获取弹框表单数据
-    handleInitData() {
-      this.loading = false
-      if (this.isEdit) { // 编辑
-        const { platformName, platformDesc, platformEnable } = this.platformInfo
-        this.form.platformName = platformName
-        this.form.platformDesc = platformDesc
-        this.form.platformEnable = platformEnable
-      } else { // 新建
-        this.form.platformName = ''
-        this.form.platformDesc = ''
-        this.form.platformEnable = 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.platformInfo.id
-        }
-
-        console.log('url => ', url)
-        console.log('params => ', params)
-        this.$emit('confirm') // 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')
-        } 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 { platformName } = this.form
-        if (!platformName) {
-          this.$message.warning('请输入平台名称')
-          reject('表单校验未通过')
-        } else {
-          resolve('表单校验通过')
-        }
-      })
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.addPlatform-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;
-        }
-      }
-    }
-  }
-  .dialog-footer {
-    text-align: center;
-  }
-}
-</style>

project/src/router/allRouter.js

@@ -62,8 +62,8 @@ const fansActiveTrends = () => import(/* webpackChunkName: 'fansActiveTrends' */
 // 数据看板 - 用户流失趋势
 const loseUserTrends = () => import(/* webpackChunkName: 'loseUserTrends' */ '@/components/dataBoard/loseUserTrends.vue')
 
-// 平台管理
-const platformManage = () => import(/* webpackChunkName: 'platformManage' */ '@/components/manage/platformManage/platformManage.vue')
+// 平台账号管理
+const accountManage = () => import(/* webpackChunkName: 'accountManage' */ '@/components/manage/accountManage/accountManage.vue')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
@@ -316,13 +316,13 @@ export var allRouter = [
         }
       },
       {
-        path: 'platformManage',
-        name: 'platformManage',
-        component: platformManage,
+        path: 'accountManage',
+        name: 'accountManage',
+        component: accountManage,
         meta: {
           keepAlive: false,
           isLogin: true,
-          title: '平台管理'
+          title: '平台账号管理'
         }
       },
       {