feat: 企微工具 - 平台管理 - "添加账号"前端页面

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

@@ -0,0 +1,152 @@
+<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>
+    <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
+    },
+    // 账号所属的平台id
+    platformId: {
+      type: [String, Number],
+      default: () => ''
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        accountNumber: '', // 账号
+      }
+    }
+  },
+  computed: {
+    // 当前操作是否为"编辑"
+    isEdit() {
+      return false // 暂时只有新建
+    },
+    // 弹框标题
+    dialogTitle() {
+      return this.isEdit ? '编辑账号' : '添加账号'
+    }
+  },
+  watch: {
+    dialogVisible(isShow) {
+      // 弹框显示 => 初始化表单数据
+      isShow && this.handleInitData()
+    },
+  },
+  methods: {
+    // 获取弹框表单数据
+    handleInitData() {
+      this.loading = false
+      if (this.isEdit) { // 编辑
+
+      } else { // 新建
+        this.form.accountNumber = ''
+      }
+    },
+    async handleConfirm() {
+      console.log('handleConfirm => ')
+      try {
+        // 表单校验
+        await this.handleFormValidate()
+        let url = `${this.URL.BASEURL}${this.URL.xxx}`
+        const params = {
+          ...this.form,
+          platformId: this.platformId
+        }
+
+        // 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 { accountNumber } = this.form
+        if (!accountNumber) {
+          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;
+        }
+      }
+    }
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>

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

@@ -11,11 +11,10 @@
       <el-table-column label="描述" prop="name" min-width="160" align="center" />
       <el-table-column label="账号" min-width="300" align="center">
         <template slot-scope="{ row }">
-          <div class="account-wrap">
-            <span>123123123</span>
-            <i class="el-icon-delete" />
+          <div v-for="item in 3" :key="item" class="account-wrap">
+            <span>123123123<i class="del-btn el-icon-delete" /></span>
           </div>
-          <div class="account-add-btn">
+          <div class="account-add-btn" @click="onClickAddAccount(row)">
             <i class="el-icon-plus" />
             <span>添加账号</span>
           </div>
@@ -48,14 +47,25 @@
       @cancel="handleAddPlatformCancel"
     />
     <!-- E 添加平台 & 编辑平台 -->
+
+    <!-- S 添加账号 -->
+    <addAccountDialog
+      :dialogVisible="addAccountDialogVisible"
+      :platformId="currentAccountPlatformId"
+      @confirm="handleAddAccountConfirm"
+      @cancel="handleAddAccountCancel"
+    />
+    <!-- E 添加账号 -->
   </div>
 </template>
 <script>
 import addPlatformDialog from './dialog/addPlatformDialog.vue'
+import addAccountDialog from './dialog/addAccountDialog.vue'
 export default {
   name: 'platformManage',
   components: {
     addPlatformDialog,
+    addAccountDialog,
   },
   data () {
     return {
@@ -71,6 +81,9 @@ export default {
 
       addPlatformDialogVisible: false, // 控制"添加平台"弹框显示
       currentPlatformInfo: {}, // 当前编辑的平台信息
+
+      addAccountDialogVisible: false, // 控制"添加账号"弹框显示
+      currentAccountPlatformId: '', // 当前需要添加账号的平台id
     }
   },
   created () {
@@ -137,6 +150,23 @@ export default {
     },
     // E 添加 & 编辑平台
 
+    // S 添加账号
+    // 监听点击"添加账号"
+    onClickAddAccount(currentPlatform) {
+      this.currentAccountPlatformId = currentPlatform.id
+      this.addAccountDialogVisible = true
+    },
+    // 添加账号账号 => 确定
+    handleAddAccountConfirm() {
+      this.addAccountDialogVisible = false
+      this.handleGetPlatform()
+    },
+    // 添加账号账号 => 取消
+    handleAddAccountCancel() {
+      this.addAccountDialogVisible = false
+    },
+    // E 添加账号
+
     // S 禁用、启用平台
     // 监听点击"禁用"、"启用"按钮
     async onClickEnable(currentPlatform, eventCode) {
@@ -193,13 +223,21 @@ export default {
 }
 .platformManage-wrap {
   .account-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    i {
-      color: #F46C6C;
-      cursor: pointer;
-      margin-left: 4px;
+    span {
+      position: relative;
+      i {
+        position: absolute;
+        right: -14px;
+        top: 3px;
+        display: none;
+        color: #F46C6C;
+        cursor: pointer;
+      }
+    }
+    &:hover {
+      i {
+        display: inline-block;
+      }
     }
   }
   .account-add-btn {