|
|
<template>
|
|
|
<!-- 使用el-tabs组件创建选项卡，通过v-model双向绑定activeTab来控制当前选中的选项卡，监听tab-click事件，触发handleTabClick方法 -->
|
|
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
|
|
<!-- 图片素材选项卡面板，标签显示为“图片素材（数量）”，数量通过assetsCount.imageCount动态获取，设置name属性为“image”，采用懒加载模式 -->
|
|
|
<el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
|
|
|
<!-- 引入自定义组件material-file，设置其fileType属性为“image”，用于展示和管理图片素材相关功能，同时监听其@change事件，触发materialCount方法 -->
|
|
|
<material-file fileType="image" ref="imagePanel" @change="materialCount"></material-file>
|
|
|
</el-tab-pane>
|
|
|
<!-- 语音素材选项卡面板，标签显示为“语音素材（数量）”，数量通过assetsCount.voiceCount动态获取，设置name属性为“voice”，采用懒加载模式 -->
|
|
|
<el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
|
|
|
<!-- 引入自定义组件material-file，设置其fileType属性为“voice”，用于展示和管理语音素材相关功能，同时监听其@change事件，触发materialCount方法 -->
|
|
|
<material-file fileType="voice" ref="voicePanel" @change="materialCount"></material-file>
|
|
|
</el-tab-pane>
|
|
|
<!-- 视频素材选项卡面板，标签显示为“视频素材（数量）”，数量通过assetsCount.videoCount动态获取，设置name属性为“video”，采用懒加载模式 -->
|
|
|
<el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
|
|
|
<!-- 引入自定义组件material-file，设置其fileType属性为“video”，用于展示和管理视频素材相关功能，同时监听其@change事件，触发materialCount方法 -->
|
|
|
<material-file fileType="video" ref="videoPanel" @change="materialCount"></material-file>
|
|
|
</el-tab-pane>
|
|
|
<!-- 图文素材选项卡面板，标签显示为“图文素材（数量）”，数量通过assetsCount.newsCount动态获取，设置name属性为“news”，采用懒加载模式 -->
|
|
|
<el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
|
|
|
<!-- 引入自定义组件material-news，用于展示和管理图文素材相关功能，同时监听其@change事件，触发materialCount方法 -->
|
|
|
<material-news ref="newsPanel" @change="materialCount"></material-news>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 用于双向绑定el-tabs组件中当前选中的选项卡名称，初始值为“image”，表示默认选中图片素材选项卡
|
|
|
activeTab: 'image',
|
|
|
assetsCount: {
|
|
|
// 图片素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
|
|
|
imageCount: '..',
|
|
|
// 视频素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
|
|
|
videoCount: '..',
|
|
|
// 语音素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
|
|
|
voiceCount: '..',
|
|
|
// 图文素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
|
|
|
newsCount: '..'
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
// 动态导入自定义组件material-file，用于处理不同类型的素材文件（图片、语音、视频）相关功能
|
|
|
MaterialFile: () => import('./assets/material-file'),
|
|
|
// 动态导入自定义组件material-news，用于处理图文素材相关功能
|
|
|
MaterialNews: () => import('./assets/material-news')
|
|
|
},
|
|
|
mounted() {
|
|
|
// 组件挂载完成后，调用materialCount方法，用于获取各类素材的数量信息
|
|
|
this.materialCount();
|
|
|
},
|
|
|
methods: {
|
|
|
handleTabClick(tab, event) {
|
|
|
// 在下次DOM更新循环后执行以下代码，确保操作的元素已经渲染完成
|
|
|
this.$nextTick(() => {
|
|
|
// 通过ref获取对应选项卡面板的组件实例，并调用其init方法进行初始化操作（不同组件的init方法可能有不同的初始化逻辑）
|
|
|
this.$refs[tab.name + 'Panel'].init();
|
|
|
});
|
|
|
},
|
|
|
materialCount() {
|
|
|
// 发起HTTP请求，获取素材数量信息，对请求的URL进行了装饰处理（可能是统一处理请求相关的配置，比如添加前缀、处理参数等）
|
|
|
this.$http({
|
|
|
url: this.$http.adornUrl('/manage/wxAssets/materialCount')
|
|
|
}).then(({ data }) => {
|
|
|
// 根据返回数据的状态码判断请求是否成功
|
|
|
if (data && data.code == 200) {
|
|
|
// 如果成功，将返回数据中的素材数量信息更新到assetsCount对象中，用于在选项卡标签等处显示准确的数量
|
|
|
this.assetsCount = data.data;
|
|
|
} else {
|
|
|
// 如果请求失败，弹出错误提示信息，显示接口返回的错误消息内容
|
|
|
this.$message.error(data.msg);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
}
|
|
|
};
|
|
|
</script> |
