This commit is contained in:
yanran200730
2022-12-29 15:07:51 +08:00
parent 5e9f44e5c4
commit 02e4b80ba1
5 changed files with 606 additions and 0 deletions

View File

@@ -0,0 +1,62 @@
<template>
<div class="doc-circulation">
<keep-alive :include="['List']">
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
</keep-alive>
</div>
</template>
<script>
import List from './components/List'
export default {
name: 'AppVoteRecord',
label: '投票记录',
props: {
instance: Function,
dict: Object
},
data () {
return {
component: 'List',
params: {},
include: []
}
},
components: {
List
},
mounted () {
if (this.$route.query.isAdd === '1') {
this.component = 'Add'
}
},
methods: {
onChange (data) {
if (data.type === 'List') {
this.component = 'List'
this.params = data.params
this.$nextTick(() => {
if (data.isRefresh) {
this.$refs.component.getList()
}
})
}
}
}
}
</script>
<style lang="scss">
.doc-circulation {
height: 100%;
background: #F3F6F9;
overflow: auto;
}
</style>

View File

@@ -0,0 +1,106 @@
<template>
<ai-list class="list">
<ai-title slot="title" title="投票记录" isShowBottomBorder :instance="instance"></ai-title>
<template slot="content">
<div class="content">
<ai-search-bar bottomBorder>
<template #left>
<el-date-picker
v-model="search.startDate"
type="date"
size="small"
value-format="yyyy-MM-DD"
placeholder="选择开始日期">
</el-date-picker>
<el-date-picker
v-model="search.endDate"
type="date"
size="small"
value-format="yyyy-MM-DD"
placeholder="选择结束日期">
</el-date-picker>
</template>
<template #right>
<el-input
v-model="search.name"
size="small"
placeholder="请输入视频名称"
clearable
v-throttle="() => {search.current = 1, getList()}"
@clear="search.current = 1, search.name = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
v-loading="loading"
style="margin-top: 16px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">>
</div>
</template>
</el-table-column>
</ai-table>
</div>
</template>
</ai-list>
</template>
<script>
export default {
name: 'List',
props: {
instance: Function,
dict: Object
},
data () {
return {
search: {
current: 1,
size: 10,
startDate: '',
endDate: '',
name: ''
},
colConfigs: [
{ prop: 'name', label: '昵称' },
{ prop: 'fillingUserNames', align: 'center', label: '投票视频' },
{ prop: 'examineUserNames', align: 'center', label: '投票时间' }
],
tableData: [],
total: 0
}
},
created () {
this.getList()
},
methods: {
getList () {
this.instance.post(`/app/appassessmentscorev2examinegroup/list`, null, {
params: {
...this.search
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
}
}
}
</script>
<style scoped lang="scss">
</style>

View File

@@ -0,0 +1,63 @@
<template>
<div class="doc-circulation">
<keep-alive :include="['List']">
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
</keep-alive>
</div>
</template>
<script>
import List from './components/List'
import Detail from './components/Detail'
export default {
name: 'AppWechatVote',
label: '公众号投票',
props: {
instance: Function,
dict: Object
},
data () {
return {
component: 'List',
params: {},
include: []
}
},
components: {
Detail,
List
},
methods: {
onChange (data) {
if (data.type === 'Detail') {
this.component = 'Detail'
this.params = data.params
}
if (data.type === 'List') {
this.component = 'List'
this.params = data.params
this.$nextTick(() => {
if (data.isRefresh) {
this.$refs.component.getList()
}
})
}
}
}
}
</script>
<style lang="scss">
.doc-circulation {
height: 100%;
background: #F3F6F9;
overflow: auto;
}
</style>

View File

@@ -0,0 +1,87 @@
<template>
<ai-detail>
<template slot="title">
<ai-title title="规则设置" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</ai-title>
</template>
<template slot="content">
<ai-card title="规则设置">
<template #content>
<el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
<el-form-item label="投票设置" style="width: 100%" prop="title" :rules="[{required: true, message: '请输入投票设置', trigger: 'blur'}]">
<el-input-number v-model="form.day" size="small" placeholder="请输入投票设置"></el-input-number>
</el-form-item>
<el-form-item label="前言设置" style="width: 100%" prop="preface" :rules="[{required: true, message: '请输入视频简介', trigger: 'blur'}]">
<ai-editor v-model="form.preface" :instance="instance"/>
</el-form-item>
<el-form-item label="结尾设置" style="width: 100%" prop="end" :rules="[{required: true, message: '请输入视频简介', trigger: 'blur'}]">
<ai-editor v-model="form.end" :instance="instance"/>
</el-form-item>
</el-form>
</template>
</ai-card>
</template>
</ai-detail>
</template>
<script>
export default {
name: 'Detail',
props: {
instance: Function,
dict: Object,
params: Object
},
data () {
return {
form: {
day: '',
preface: '',
end: ''
}
}
},
created () {
this.getInfo()
},
methods: {
getInfo () {
},
onConfirm () {
this.$refs.form.validate((valid) => {
if (valid) {
this.instance.post(`/app/appassessmentscorev2task/addOrUpdate`, {
...this.form,
beginTime: this.form.date[0],
endTime: this.form.date[1],
date: ''
}).then(res => {
if (res.code == 0) {
this.$message.success('提交成功!')
this.isShow = false
this.getList()
}
})
}
})
},
cancel () {
this.$emit('change', {
type: 'List',
isRefresh: true
})
}
}
}
</script>
<style scoped lang="scss">
</style>

View File

@@ -0,0 +1,288 @@
<template>
<ai-list class="AppWechatVote">
<ai-title slot="title" title="公众号投票" isShowBottomBorder :instance="instance"></ai-title>
<template slot="content">
<div class="content">
<ai-search-bar bottomBorder>
<template #left>
<el-button type="primary" @click="isShow = true">添加</el-button>
<el-button type="primary" @click="toSetting">规则设置</el-button>
</template>
<template #right>
<el-input
v-model="search.title"
size="small"
placeholder="请输入视频名称"
clearable
v-throttle="() => {search.current = 1, getList()}"
@clear="search.current = 1, search.title = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 16px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="toDetail(row.id)">详情</el-button>
<el-button type="text" v-if="row.status !== '1'" @click="remove(row.id)">删除</el-button>
<el-button type="text" v-if="row.status === '1'" @click="stop(row.id)">停止</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</div>
<ai-dialog
:visible.sync="isShow"
width="890px"
title="视频上传"
@close="onClose"
@onConfirm="onConfirm">
<el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
<el-form-item label="视频名称" style="width: 100%" prop="title" :rules="[{required: true, message: '请输入视频名称', trigger: 'blur'}]">
<el-input v-model="form.title" size="small" placeholder="请输入视频名称"></el-input>
</el-form-item>
<el-form-item label="视频简介" style="width: 100%" prop="title" :rules="[{required: true, message: '请输入视频简介', trigger: 'blur'}]">
<el-input v-model="form.title" type="textarea" size="small" :rows="4" placeholder="请输入视频简介"></el-input>
</el-form-item>
<el-form-item label="视频" prop="files" style="width: 100%;" :rules="[{required: true, message: '请上传视频', trigger: 'change'}]">
<el-upload :show-file-list="false" ref="upload1" action :http-request="submitUpload" :accept="accept" :limit="1">
<div class="video" v-if="!form.files.length">
<div class="icon">
<ai-icon type="svg" icon="iconVideo"/>
<span>上传视频</span>
</div>
<span class="tips">支持mp4格式单个文件最大100MB</span>
</div>
</el-upload>
<video
class="video-com"
style="width:100%; height:100%; object-fit: fill;"
muted
:src="form.files[0].url"
controls="controls"
v-if="form.files.length">
</video>
<el-upload
:show-file-list="false"
ref="upload2"
action
:http-request="submitUpload"
:accept="accept"
:limit="1"
v-if="form.files.length">
<el-button style="margin-top: 10px;">重新选择</el-button>
</el-upload>
</el-form-item>
</el-form>
</ai-dialog>
</template>
</ai-list>
</template>
<script>
import mp4box from 'mp4box'
export default {
name: 'List',
props: {
instance: Function,
dict: Object
},
data () {
return {
accept: '.mp4',
search: {
current: 1,
size: 10,
title: ''
},
isShow: false,
form: {
title: '',
files: []
},
colConfigs: [
{ prop: 'title', label: '视频名称' },
{ prop: 'createUserName', align: 'center', label: '视频简介' },
{ prop: 'createUserName', align: 'center', label: '票数' }
],
tableData: [],
total: 0
}
},
created () {
this.getList()
},
methods: {
onClose () {
this.form.date = ''
this.form.templateId = ''
this.form.title = ''
this.isShow = false
},
submitUpload(file) {
this.$refs['upload1']?.clearFiles();
this.$refs['upload2']?.clearFiles();
this.$refs['ruleForm']?.clearValidate('videoFile');
const fileType = file.file.name.split(".")[1];
const size = file.file.size / 1024 / 1024 > 300;
let mp4boxfile = mp4box.createFile();
const reader = new FileReader();
reader.readAsArrayBuffer(file.file);
reader.onload = (e) => {
const arrayBuffer = e.target.result;
arrayBuffer.fileStart = 0;
mp4boxfile.appendBuffer(arrayBuffer);
};
mp4boxfile.onReady = (info) => {
let codec = info.mime.match(/codecs="(\S*),/)[1]
if (codec.indexOf('avc') === -1) {
return this.$message.error("视频编码格式不支持")
}
if (size) {
return this.$message.error("视频大小不能超过300M");
}
if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
let formData = new FormData()
formData.append('file', file.file);
this.isLoading = true
this.instance.post(`/admin/file/add-unlimited`, formData).then(res => {
if (res && res.data) {
let videoList = res.data[0].split(";");
this.form.files = [{
id: videoList[1],
url: videoList[0]
}]
}
this.isLoading = false
}).catch(() => {
this.isLoading = false
})
} else {
return this.$message.error("视频格式错误")
}
}
},
onConfirm () {
this.$refs.form.validate((valid) => {
if (valid) {
this.instance.post(`/app/appassessmentscorev2task/addOrUpdate`, {
...this.form,
beginTime: this.form.date[0],
endTime: this.form.date[1],
date: ''
}).then(res => {
if (res.code == 0) {
this.$message.success('提交成功!')
this.isShow = false
this.getList()
}
})
}
})
},
getList () {
this.instance.post(`/app/appassessmentscorev2task/list`, null, {
params: {
...this.search
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
this.loading = false
}
})
},
toSetting (id) {
this.$emit('change', {
type: 'Detail',
params: {
id
}
})
},
remove (id) {
this.$confirm('确定删除该数据?').then(() => {
this.instance.post(`/app/appassessmentscorev2task/delete?ids=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功!')
this.getList()
}
})
})
}
}
}
</script>
<style scoped lang="scss">
.AppWechatVote .video {
width: 650px;
height: 360px;
border-radius: 4px;
border: 1px dashed #D0D4DC;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span:nth-child(2) {
display: inline-block;
font-size: 16px;
color: #333333;
line-height: 30px;
}
.iconfont {
display: inline-block;
font-size: 40px;
color: #2266FF;
}
}
.tips {
display: inline-block;
font-size: 12px;
color: #999999;
line-height: 26px;
}
}
.video-com {
width: 640px;
height: 360px;
background: rgba(0, 0, 0, 0.5);
border-radius: 2px;
border: 1px solid #D0D4DC;
margin-top: -40px;
}
</style>