李

src/views/modules/wx/wx-account.vue

@@ -1,65 +1,93 @@
 <template>
+    <!-- 组件的HTML模板 -->
     <div class="mod-config">
+        <!-- 搜索表单 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 输入框，用于输入搜索关键词 -->
             <el-form-item>
                 <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
             </el-form-item>
+            <!-- 操作按钮 -->
             <el-form-item>
+                <!-- 查询按钮，触发数据列表的获取 -->
                 <el-button @click="getDataList()">查询</el-button>
+                <!-- 新增按钮，根据权限显示 -->
                 <el-button v-if="isAuth('wx:wxaccount:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                <!-- 批量删除按钮，根据权限和选中项显示 -->
                 <el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
         </el-form>
+        <!-- 数据表格 -->
         <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 多选框 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
+            <!-- 展示appid -->
             <el-table-column prop="appid" header-align="center" align="center" label="appid">
             </el-table-column>
+            <!-- 展示公众号名称 -->
             <el-table-column prop="name" header-align="center" align="center" label="公众号名称">
             </el-table-column>
+            <!-- 展示公众号类型，通过formatter格式化显示 -->
             <el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat">
             </el-table-column>
+            <!-- 展示是否认证 -->
             <el-table-column prop="verified" header-align="center" align="center" label="是否认证">
+                <!-- 使用插槽自定义显示内容 -->
                 <span slot-scope="scope">{{scope.row.verified?"是":"否"}}</span>
             </el-table-column>
+            <!-- 操作列 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <!-- 使用插槽添加按钮 -->
                 <template slot-scope="scope">
-                    
                     <el-button type="text" size="small" @click="accessInfo(scope.row)">接入</el-button>
                     <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
                     <el-button type="text" size="small" @click="deleteHandle(scope.row.appid)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
-        <!-- 弹窗, 新增 / 修改 -->
+        <!-- 新增/修改弹窗 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+        <!-- 接入信息弹窗 -->
         <account-access v-if="accountAccessVisible" ref="accountAccessDialog"></account-access>
     </div>
 </template>
 
 <script>
+// 引入子组件
 import AddOrUpdate from './account/wx-account-add-or-update'
 import AccountAccess from './account/wx-account-access-info'
 import { mapState } from 'vuex'
+
 export default {
     data() {
         return {
+            // 搜索表单数据
             dataForm: {
                 key: ''
             },
+            // 数据列表
             dataList: [],
+            // 数据列表加载状态
             dataListLoading: false,
+            // 选中项
             dataListSelections: [],
+            // 新增/修改弹窗显示状态
             addOrUpdateVisible: false,
-            accountAccessVisible:false
+            // 接入信息弹窗显示状态
+            accountAccessVisible: false
         }
     },
+    // 引入子组件
     components: {
-        AddOrUpdate,AccountAccess
+        AddOrUpdate,
+        AccountAccess
     },
+    // 从Vuex中获取状态
     computed: mapState({
-        ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES
+        ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES
     }),
+    // 组件激活时获取数据列表
     activated() {
         this.getDataList()
     },
@@ -67,53 +95,55 @@ export default {
         // 获取数据列表
         getDataList() {
             this.dataListLoading = true
+            // 发起HTTP请求获取数据
             this.$http({
-                url: this.$http.adornUrl('/manage/wxAccount/list'),
+                url: this.$http.adornUrl('/manage/wxAccount/list'), // 调用封装的URL处理函数
                 method: 'get',
-                params: this.$http.adornParams({
+                params: this.$http.adornParams({ // 调用封装的参数处理函数
                     'key': this.dataForm.key
                 })
             }).then(({ data }) => {
                 if (data && data.code === 200) {
-                    this.dataList = data.list
+                    this.dataList = data.list // 更新数据列表
-                    this.$store.commit('wxAccount/updateAccountList', data.list)
+                    this.$store.commit('wxAccount/updateAccountList', data.list) // 更新Vuex中的状态
                 } else {
-                    this.dataList = []
+                    this.dataList = [] // 清空数据列表
                 }
-                this.dataListLoading = false
+                this.dataListLoading = false // 结束加载状态
             })
         },
-        // 多选
+        // 处理多选变化
         selectionChangeHandle(val) {
             this.dataListSelections = val
         },
-        // 新增 / 修改
+        // 新增/修改操作
         addOrUpdateHandle(item) {
             this.addOrUpdateVisible = true
             this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(item)
+                this.$refs.addOrUpdate.init(item) // 初始化弹窗
             })
         },
-        accessInfo(item){
+        // 接入信息操作
+        accessInfo(item) {
             this.accountAccessVisible = true
             this.$nextTick(() => {
-                this.$refs.accountAccessDialog.init(item)
+                this.$refs.accountAccessDialog.init(item) // 初始化弹窗
             })
         },
-        // 删除
+        // 删除操作
         deleteHandle(appid) {
-            var ids = appid ? [appid] : this.dataListSelections.map(item => {
+            // 根据是否有传入appid决定是单个删除还是批量删除
-                return item.appid
+            var ids = appid ? [appid] : this.dataListSelections.map(item => item.appid)
-            })
             this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid ? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求删除数据
                 this.$http({
                     url: this.$http.adornUrl('/manage/wxAccount/delete'),
                     method: 'post',
-                    data: this.$http.adornData(ids, false)
+                    data: this.$http.adornData(ids, false) // 调用封装的数据处理函数
                 }).then(({ data }) => {
                     if (data && data.code === 200) {
                         this.$message({
@@ -121,17 +151,18 @@ export default {
                             type: 'success',
                             duration: 1500,
                             onClose: () => {
-                                this.getDataList()
+                                this.getDataList() // 刷新数据列表
                             }
                         })
                     } else {
-                        this.$message.error(data.msg)
+                        this.$message.error(data.msg) // 显示错误信息
                     }
                 })
             })
         },
+        // 格式化公众号类型显示
         accountTypeFormat(row, column, cellValue) {
-            return this.ACCOUNT_TYPES[cellValue];
+            return this.ACCOUNT_TYPES[cellValue]
         }
     }
 }