all_user/huangguo_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
ouyangxiu
2025-06-20 15:14:52 +07:00
parent 27469cbd8f
commit 59577a69ff
3 changed files with 487 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/aiManagement/aiTemplate/components/AddOrEdit.vue
+219
View File
@@ -0,0 +1,219 @@
<template>
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="请选择Ai内容类型">
<el-select placeholder="请选择Ai内容类型" clearable v-model="form.contentType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.contentType == 2">
<el-form-item label="媒资库视频taskId" prop="fakeSells">
<el-input v-model="form.taskID" placeholder="请输入媒资库视频taskId" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="请选择Ai类型">
<el-select placeholder="请选择Ai类型" clearable v-model="form.atType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AtTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="风格类型" prop="styleType">
<el-select placeholder="请选择风格类型" clearable v-model="form.styleType" filterable @clear="onClear('styleType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in styleTypeList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="模版分类" prop="categoryId">
<el-select placeholder="请选择模版分类" clearable v-model="form.categoryId" filterable @clear="onClear('categoryId')">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in categoryIdList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="模版图片">
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.picture"></UploadImg>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="激活状态">
<el-select placeholder="请选择激活状态" clearable v-model="form.enable">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiEnableList" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="售卖次数（虚拟）" prop="fakeSells">
<el-input v-model.number="form.fakeSells" placeholder="请输入售卖次数（虚拟）" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="模版标题" prop="fakeSells">
<el-input v-model="form.title" placeholder="模版标题" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="价格">
<el-input placeholder="请输入价格" v-model.number="form.price"> </el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="排序">
<el-input placeholder="请输入排序" v-model.number="form.rank"> </el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="Visible = false"> 取 消 </el-button>
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
</div>
</el-dialog>
</template>
<script>
import UploadImg from '@/components/UploadImg/index'
import { AtTypeList, AiContentTypeList, AiEnableList , styleTypeList } from '@/filters/aiManagement/aiTemplate'
import { aitemplateAdd, aitemplateUpdate } from '@/api/aiManagement/aiTemplate'
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
// import UploadVideo from '@/components/UploadVideo/index'
// import DPlayer from '@/components/VueDplayerHls/index'
export default {
name: 'AddOrEdit',
props: ['data', 'categoryIdList'],
components: {
UploadImg
// UploadVideo,
// DPlayer
},
data() {
return {
AtTypeList: AtTypeList(),
AiContentTypeList: AiContentTypeList(),
AiEnableList: AiEnableList(),
styleTypeList: styleTypeList(),
Visible: true,
title: '',
time: [],
// 表单数据备份
formData: {},
// 表单数据
form: {
atType: undefined,
contentType: undefined,
createdAt: undefined,
enable: undefined,
fakeSells: undefined,
height: undefined,
id: undefined,
picture: undefined,
playTime: undefined,
price: undefined,
rank: undefined,
sells: undefined,
taskID: undefined,
title: undefined,
updatedAt: undefined,
videoCover: undefined,
videoUrl: undefined,
width: undefined,
categoryId: undefined
},
rules: {}
}
},
mounted() {
this.title = this.data.title
if (this.title === '编辑') {
this.form = { ...this.data.data }
this.formData = Object.assign({}, this.form)
this.form.price = changeMoneyYuan(this.formData.price)
}
},
methods: {
// TODO:新增应用列表数据
add(data) {
data.price = changeMoneyFen(data.price)
if (data.contentType === 2 && !data.taskID) return this.$message.error('请输入视频taskId进行视频绑定！')
aitemplateAdd(data).then(res => {
if (res.code === 200) {
this.Visible = false
this.$message.success('新增成功')
} else {
this.Visible = false
this.$message.error('新增失败')
}
})
},
filterM3u8(v) {
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
},
// TODO：编辑应用列表数据
update(data) {
data.price = changeMoneyFen(data.price)
aitemplateUpdate(data).then(res => {
if (res && res.code === 200) {
this.Visible = false
this.$message.success('更新成功')
} else {
this.Visible = false
this.$message.error('更新失败')
}
})
},
// 提交按钮
submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
if (this.title === '新增') {
this.add(this.form)
} else if (this.title === '编辑') {
this.update(this.form)
}
}
})
},
// 上传视频返回地址
changeVideoUrl(data) {
this.form.id = data.id
// this.$set(this.form, 'fieldNameFs', data.videoUri)
this.form.videoUri = data.videoUri
// this.form.fieldNameFs = data.videoUri
// this.form.videoTime = parseInt(data.duration)
// this.form.size = data.size
// this.open()
},
// 重复上传视频
repeatVideo(data) {
this.form.taskId = data.taskId
},
// 上传图片返回地址
changeCoverImgUrl(data) {
this.form.picture = data
},
changeVideoCoverImgUrl(data) {
this.form.videoCover = data
},
// 关闭编辑
close() {
this.$emit('close')
},
onClear(data) {
this.form[data] = undefined
}
}
}
</script>
src/views/aiManagement/aiTemplate/index.vue
+267
View File
@@ -0,0 +1,267 @@
<template>
<div class="pf-warpper avlist">
<el-row class="table-form">
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
<el-form-item>
<el-select placeholder="请选择Ai类型" clearable v-model="searchData.atType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AtTypeList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择Ai内容类型" clearable v-model="searchData.contentType" @clear="onClear('subType')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择激活状态" clearable v-model="searchData.enable" @clear="onClear('enable')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiEnableList" />
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="请选择排序状态" clearable v-model="searchData.sort" @clear="onClear('sort')">
<el-option key="0" :label="'最新'" :value="0" />
<el-option key="1" :label="'最热'" :value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入视频媒资库taskID" v-model.number="searchData.taskID" @clear="onClear('taskID')" />
</el-form-item>
<el-form-item>
<el-input clearable placeholder="请输入模版标题" v-model.number="searchData.title" @clear="onClear('title')" />
</el-form-item>
<el-form-item>
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col>
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="类型">
<template slot-scope="scope">{{ scope.row.atType | changeAtType }}</template>
</el-table-column>
<el-table-column align="center" label="AI内容类型">
<template slot-scope="scope">{{ scope.row.contentType | changeAiContentType }}</template>
</el-table-column>
<el-table-column align="center" label="风格类型">
<template slot-scope="scope">{{ scope.row.styleType | changeStyleType }}</template>
</el-table-column>
<el-table-column align="center" label="售卖次数（虚拟）">
<template slot-scope="scope">{{ scope.row.fakeSells }}</template>
</el-table-column>
<el-table-column align="center" label="售卖次数（真）">
<template slot-scope="scope">{{ scope.row.sells }}</template>
</el-table-column>
<el-table-column align="center" label="价格">
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
</el-table-column>
<el-table-column align="center" label="排序">
<template slot-scope="scope">{{ scope.row.rank }}</template>
</el-table-column>
<el-table-column align="center" label="是否激活">
<template slot-scope="scope">
<el-button :type="scope.row.enable ? 'success' : 'error'" plain size="mini">{{ scope.row.enable ? '开启' : '关闭' }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="视频媒资库taskID（视频才会存在）">
<template slot-scope="scope">{{ scope.row.taskID }}</template>
</el-table-column>
<el-table-column align="center" label="模版标题">
<template slot-scope="scope">{{ scope.row.title }}</template>
</el-table-column>
<el-table-column align="center" width="100" label="模版图片">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.picture"></ShowImg>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="视频封面">
<template slot-scope="scope">
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.videoCover"> </ShowImg>
</template>
</el-table-column>
<el-table-column align="center" label="影片时长">
<template slot-scope="scope">{{ scope.row.playTime | secondToHouseMinuteSecond }}</template>
</el-table-column>
<el-table-column align="center" label="视频">
<template slot-scope="scope">
<i v-if="scope.row.videoUrl" class="el-icon-video-play views" title="点击预览" @click="checkMedia(scope.row.videoUrl, scope.row)"></i>
<div v-else>暂无</div>
</template>
</el-table-column>
<el-table-column align="center" label="创建时间" width="180">
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" label="更新时间" width="180">
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<div class="table-pagination">
<el-pagination
:current-page="searchData.pageNum"
:page-size="searchData.pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<!-- 新增及编辑 -->
<Edit :data="editData" v-if="editVisible" @close="closeEdit" :categoryIdList="categoryIdList" />
<ShowVideo ref="showvideo"></ShowVideo>
</div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEdit'
import ShowImg from '@/components/ShowImg/index.vue'
import { aitemplateSearch, aitemplateDel } from '@/api/aiManagement/aiTemplate'
import ShowVideo from '@/components/ShowVideo/index.vue'
import { AtTypeList, AiContentTypeList, AiEnableList } from '@/filters/aiManagement/aiTemplate'
import { aitemplateCategoryList } from '@/api/aiManagement/aiOrder'
export default {
name: 'AiTemplate',
components: {
ShowImg,
Edit,
ShowVideo
},
data() {
return {
// 请求列表参数
searchData: {
atType: undefined,
contentType: undefined, // 搜索结束时间
enable: undefined, // 搜索开始时间
sort: undefined, // 发布者ID
taskID: undefined,
title: undefined,
pageNum: 1,
pageSize: 10
},
resData: [], // el-table表格数据
total: 0, // 数据总条数
loading: true, // 列表加载状态
AtTypeList: AtTypeList(),
AiContentTypeList: AiContentTypeList(),
AiEnableList: AiEnableList(),
editVisible: false,
categoryIdList: []
}
},
mounted() {
this.getGameInfo()
this.getCategoryId()
},
methods: {
getCategoryId() {
aitemplateCategoryList({
pageNum: 1,
pageSize: 1000
}).then(res => {
if (res.code === 200) {
this.categoryIdList = res.data.list
} else {
this.categoryIdList = []
this.$message.error('请求列表失败!')
}
})
},
// TODO:请求应用列表数据
getGameInfo() {
aitemplateSearch(this.searchData).then(res => {
if (res.code === 200) {
this.resData = res.data.list
this.total = res.data.total
} else {
this.resData = []
this.total = 0
this.$message.error('请求列表失败!')
}
this.loading = false
})
},
// TODO：删除应用列表数据
handleDelete(index, row) {
this.$confirm('确定删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
aitemplateDel({ id: row.id }).then(res => {
if (res.code === 200) {
this.getGameInfo()
this.$message.success('成功删除!')
} else {
this.$message.error('操作失败')
}
})
})
},
onSearch() {
this.searchData.pageNum = 1
this.searchData.pageSize = 10
this.getGameInfo()
},
// 切换每页数据量
handleSizeChange(val) {
this.searchData.pageSize = val
this.getGameInfo()
},
// 切换页数
handleCurrentChange(val) {
this.searchData.pageNum = val
this.getGameInfo()
},
// 新增按钮
add() {
this.editVisible = true
this.editData = {
title: '新增'
}
},
// 编辑按钮
handleEdit(index, row) {
this.editVisible = true
this.editData = {
title: '编辑',
data: row
}
},
// 关闭编辑弹窗
closeEdit() {
this.editData = {
title: '新增',
data: {}
}
this.editVisible = false
this.getGameInfo()
},
// 清空某一项筛选列表
onClear(key) {
this.searchData[key] = undefined
this.getGameInfo()
},
// 视频查看
checkMedia(url, data) {
this.$refs.showvideo.open(url, data, data.id)
}
}
}
</script>
src/views/system/systemConfig/index.vue
+1 -1
View File
@@ -202,7 +202,7 @@
<el-input placeholder="请输入Ai文生图所需金币" v-model.number="form.aiTextToImagePrice">
<template slot="append">金币</template>
</el-input>
<p style="margin:0;color:red">*Ai图片生成视频所需金币</p>
<p style="margin:0;color:red">*Ai文生图所需金币</p>
</el-form-item>
</el-tab-pane>
</el-tabs>