mkaoj697q
/
WeChat
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

李

Browse Source
pull/17/head
李嫚嫚 2 months ago
parent 163ee83e2d
commit 1345f361e0
1 changed files with 56 additions and 25 deletions
Show Stats Download Patch File Download Diff File

81
src/views/modules/wx/wx-account.vue
Unescape View File

@ -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.$store.commit('wxAccount/updateAccountList', data.list)
this.dataList = 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 => {
return item.appid
})
// 根据是否有传入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,18 +151,19 @@ 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]
}
}
}
</script>
</script>
Write Preview
Loading…
Cancel
Save