Skip to content

C
confucius
Commit c8b340af authored by Mac's avatar Mac
Browse files
Options

素材管理和分组页面的新建

parent 99f0f60f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1824 additions and 1 deletion
src/components/enterprise/material/allmaterial.vue 0 → 100644
View file @ c8b340af
<template>
<div class="allmaterial" style="padding: 0;margin: 0;">
<!-- <div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
</div>
</div> -->
<div class="page-content">
<q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
separator="none" title="" :data="data" :columns="columns" row-key="name">
<!-- <template v-slot:top="props">
<div class="col-2 q-table__title"></div>
<q-space />
<q-btn color="accent" style="float:right;margin-right:0;" size="sm" class="q-mr-md" icon="add"
label="新增欢迎语" @click="goadd()"></q-btn>
</template> -->
<template v-slot:body-cell-Type="props">
<q-td :props="props">
<span v-if="props.row.Type==1">图文</span>
<span v-if="props.row.Type==2">图片</span>
</q-td>
</template>
<template v-slot:body-cell-Content="props">
<q-td :props="props">
<q-img
:src="props.row.Content"
style="width: 80px;height: 80px;border-radius: 6px;display: flex;"
>
</q-img>
</q-td>
</template>
<template v-slot:body-cell-optioned="props">
<q-td :props="props">
<q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
label="编辑" @click="goDetailed(props.row,'0')" />
<q-btn flat size="xs" icon="delete" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
label="删除" @click="goDetailed(props.row,'0')" />
</q-td>
</template>
<template v-slot:bottom>
<q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
:input="true" @input="changePage" />
</template>
</q-table>
</div>
</div>
</template>
<script>
export default {
name: "allmaterial",
data() {
return {
loading: false,
ISsystem: false,
data: [{Type:1,
title:'阿萨欢声雷动.png',
Content:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107070330161360000000064.jpg',
applymember:'通用',
source:'本地上传',
CreatorName:'小张',
UpdateTime:'2021-08-04 15:48'}],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 10,
rowsPerPage: 10,
Month: '',
TeacherId: 0,
State: 0,
},
//公告column
columns: [{
name: 'title',
field: 'title',
label: '标题',
align: 'left'
},
{
name: 'Content',
field: 'Content',
label: '内容',
align: 'left',
},
{
name: 'CreatorName',
field: 'CreatorName',
label: '上传者',
align: 'left'
},
{
name: 'source',
field: 'source',
label: '素材来源',
align: 'left'
},
{
name: 'Type',
field: 'Type',
label: '类型',
align: 'left'
},
{
name: 'UpdateTime',
field: 'UpdateTime',
label: '添加时间',
align: 'left'
},
{
name: 'optioned',
label: '操作',
field: 'DeptId'
}
],
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e){
},
goadd(){
this.$router.push({
path:'/enterprise/addWelcome',
});
}
}
}
</script>
<style>
.allmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.allmaterial .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.allmaterial .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.allmaterial .el-date-editor.el-input {
width: 100%;
}
.allmaterial .el-date-editor.el-input input {
background-color: transparent !important;
}
.allmaterial .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.allmaterial .el-drawer.rtl{
overflow: inherit;
}
</style>
\ No newline at end of file
src/components/enterprise/material/audiomaterial.vue 0 → 100644
View file @ c8b340af
This diff is collapsed.
src/components/enterprise/material/filematerial.vue 0 → 100644
View file @ c8b340af
<template>
<div class="filematerial" style="padding: 0;margin: 0;">
<div class="page-content">
<div>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="add" label="上传视频"
@click="goadd()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;">
<q-card class="imgcard" v-for="(x,y) in data" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="data[y].check = !data[y].check">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
<span>{{x.UpdateTime}}</span>
<!-- <q-btn class="q-mr-md" label="编辑" size="xs" color="accent" style="margin-right: 0;" @click.stop="goedit(x)" /> -->
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i>
</div>
<div class="iconfontfile " v-if="x.Content!=''"
:class="x.Content.substring(x.Content.lastIndexOf('.')+1,x.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
@click="showUpLoadFile()">
</div>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.CreatorName}}</div>
<div class="onetext" style="margin-top: 5px;">来源:{{x.source}}</div>
</q-card-section>
</q-card>
</div>
</div>
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新建图文</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="ID" option-label="Name" v-model="addMsg.classifyId"
ref="ID" :options="classifyList" label="分组" :dense="false" emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传文件:</div>
<div class="iconfontfile " v-if="addMsg.Url!=''"
:class="addMsg.Url.substring(addMsg.Url.lastIndexOf('.')+1,addMsg.Url.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
@click="showUpLoadFile()">
</div>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传"></q-btn>
</el-upload>
<div style="margin-top: 20px;">
(上传文件大小不超过20MB，支持DOC、DOCX、XLS、XLSX、CSV、PPT、PPTX、TXT、PDF及Xmind格式。)
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Isadd = false" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="submit()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
const addobj = { Id: 0, classifyId: '', Url: '', }
export default {
name: "filematerial",
data() {
return {
loading: false,
Isadd: false,
data: [{
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060532494570000000006.docx',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060532494570000000006.docx',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060532494570000000006.docx',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
},],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 18,
},
classifyList: [
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
],
addMsg: Object.assign({}, addobj),
audioDuration: 0,
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e) {
},
goadd() {
this.Isadd = true;
this.addMsg = Object.assign({}, addobj)
},
goedit(x) {
this.Isadd = true;
this.addMsg.Url = x.Content
},
uploadFile(file) {
// 文件类型进行判断
const isLt20M = file.size / 1024 / 1024 < 20;
let ft = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length).toUpperCase();
let stringArr = 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF'
if (stringArr.indexOf(ft) == '-1') {
this.$q.notify({
type: 'negative',
message: `请上传正确的文件格式!`,
position: 'top'
})
return false;
}
if (!isLt20M) {
this.$q.notify({
type: 'negative',
message: `文件大小不能超过20MB哦!`,
position: 'top'
})
return false;
}
UploadSelfFile("course", file, res => {
if (res.Code == 1) {
this.addMsg.Url = res.FileUrl;
}
});
},
submit() {//提交
}
}
}
</script>
<style>
.filematerial .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.filematerial .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.filematerial .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.filematerial .el-date-editor.el-input {
width: 100%;
}
.filematerial .el-date-editor.el-input input {
background-color: transparent !important;
}
.filematerial .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.filematerial .el-drawer.rtl {
overflow: inherit;
}
.filematerial .imgcard {
width: 300px;
margin: 0 15px 15px 0
}
.filematerial .imgstyle {
width: 100%;
height: 45px;
border-radius: 0;
}
.filematerial .onetext {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 260px;
}
.iconfontfile {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
color: #e95252 !important;
background-color: rgba(251, 251, 251, 0.9);
}
.icon-excel,
.icon-pdf {
text-align: center;
font-size: 38px;
color: green;
}
</style>
\ No newline at end of file
src/components/enterprise/material/imgmaterial.vue 0 → 100644
View file @ c8b340af
<template>
<div class="imgmaterial" style="padding: 0;margin: 0;">
<div class="page-content">
<div>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="cloud_upload" label="上传图片"
@click="goadd()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;">
<q-card class="imgcard" v-for="(x,y) in data" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="data[y].check = !data[y].check">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
<span>{{x.UpdateTime}}</span>
<!-- <q-btn class="q-mr-md" label="编辑" size="xs" color="accent" style="margin-right: 0;" @click.stop="goedit(x)" /> -->
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;" @click.stop="goedit(x)"></i>
</div>
<q-img :src="x.Content" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;">
{{x.title}}
</div>
</q-img>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.CreatorName}}</div>
<div class="onetext" style="margin-top: 5px;">来源:{{x.source}}</div>
</q-card-section>
</q-card>
</div>
</div>
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新建图片素材</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="ID" option-label="Name" v-model="addMsg.classifyId"
ref="ID" :options="classifyList" label="分组" :dense="false" emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传图片:</div>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader materialupload" action="" :before-upload="uploadFile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
:show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;" v-if="addMsg.img==''"></i>
<q-img v-else :src="addMsg.img"
style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
</q-img>
</el-upload>
<div style="margin-top: 20px;">
(图片大小不超过2M，图片名不能重复，支持JPG，JPEG及PNG格式)
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Isadd = false" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="submit()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
const addobj={ Id: 0, classifyId: '', img: '',}
export default {
name: "imgmaterial",
data() {
return {
loading: false,
Isadd: false,
data: [{
Type: 1,
title: '测试文本.png',
Content: 'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107070330161360000000064.jpg',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090216027320000000011.jpg',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090302364350000000080.jpg',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
},],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 18,
},
classifyList: [
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
],
addMsg: Object.assign({}, addobj)
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e) {
},
goadd() {
this.Isadd = true;
this.addMsg= Object.assign({}, addobj)
},
goedit(x){
this.Isadd = true;
this.addMsg.img= x.Content
},
uploadFile(files) {//图片上传
UploadSelfFile("course", files, res => {
if (res.Code == 1) {
this.addMsg.img = res.FileUrl;
}
});
},
submit(){//提交
}
}
}
</script>
<style>
.imgmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.imgmaterial .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.imgmaterial .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.imgmaterial .el-date-editor.el-input {
width: 100%;
}
.imgmaterial .el-date-editor.el-input input {
background-color: transparent !important;
}
.imgmaterial .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.imgmaterial .el-drawer.rtl {
overflow: inherit;
}
.imgmaterial .imgcard {
width: 240px;
margin: 0 15px 15px 0
}
.imgmaterial .imgstyle {
width: 100%;
height: 120px;
border-radius: 0;
}
.imgmaterial .onetext {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 208px;
}
</style>
\ No newline at end of file
src/components/enterprise/material/imgtextmaterial.vue 0 → 100644
View file @ c8b340af
<template>
<div class="imgtextmaterial" style="padding: 0;margin: 0;">
<div class="page-content">
<div>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="add" label="添加图文"
@click="goadd()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;">
<q-card class="imgcard" v-for="(x,y) in data" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="data[y].check = !data[y].check">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
<span>{{x.UpdateTime}}</span>
<!-- <q-btn class="q-mr-md" label="编辑" size="xs" color="accent" style="margin-right: 0;" @click.stop="goedit(x)" /> -->
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i>
</div>
<q-img :src="x.Content" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;">
{{x.title}}
</div>
</q-img>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.CreatorName}}</div>
<div class="onetext" style="margin-top: 5px;">来源:{{x.source}}</div>
</q-card-section>
</q-card>
</div>
</div>
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新建图文</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="ID" option-label="Name" v-model="addMsg.classifyId"
ref="ID" :options="classifyList" label="分组" :dense="false" emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传图片:</div>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader materialupload" action="" :before-upload="uploadFile"
accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp" :show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"
v-if="addMsg.img==''"></i>
<q-img v-else :src="addMsg.img"
style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
</q-img>
</el-upload>
<div style="margin-top: 20px;">
图片大小不超过2M，图片名不能重复，支持JPG，JPEG及PNG格式
</div>
<q-input clearable standout="bg-primary text-white" v-model="addMsg.title" label="添加标题"
style="margin-top: 20px;" />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.content" type="textarea"
label="添加描述" style="margin-top: 20px;" />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.link"
label="请输入跳转链接，且必须以http://或https://开头" style="margin-top: 20px;" />
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Isadd = false" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="submit()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
const addobj = { Id: 0, classifyId: '', img: '', title: '', content: '', }
export default {
name: "imgtextmaterial",
data() {
return {
loading: false,
Isadd: false,
data: [{
Type: 1,
title: '测试文本.png',
Content: 'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107070330161360000000064.jpg',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090216027320000000011.jpg',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090302364350000000080.jpg',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
},],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 18,
},
classifyList: [
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
],
addMsg: Object.assign({}, addobj)
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e) {
},
goadd() {
this.Isadd = true;
this.addMsg = Object.assign({}, addobj)
},
goedit(x) {
this.Isadd = true;
this.addMsg.img = x.Content
},
uploadFile(files) {//图片上传
UploadSelfFile("course", files, res => {
if (res.Code == 1) {
this.addMsg.img = res.FileUrl;
}
});
},
submit() {//提交
}
}
}
</script>
<style>
.imgtextmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.imgtextmaterial .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.imgtextmaterial .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.imgtextmaterial .el-date-editor.el-input {
width: 100%;
}
.imgtextmaterial .el-date-editor.el-input input {
background-color: transparent !important;
}
.imgtextmaterial .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.imgtextmaterial .el-drawer.rtl {
overflow: inherit;
}
.imgtextmaterial .imgcard {
width: 240px;
margin: 0 15px 15px 0
}
.imgtextmaterial .imgstyle {
width: 100%;
height: 120px;
border-radius: 0;
}
.imgtextmaterial .onetext {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 208px;
}
</style>
\ No newline at end of file
src/components/enterprise/material/textmaterial.vue 0 → 100644
View file @ c8b340af
<template>
<div class="textmaterial" style="padding: 0;margin: 0;">
<div class="page-content">
<q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
separator="none" title="" :data="data" :columns="columns" row-key="name">
<template v-slot:top="props">
<div class="col-2 q-table__title"></div>
<q-space />
<q-btn color="accent" style="float:right;margin-right:0;" size="sm" class="q-mr-md" icon="add"
label="添加文本" @click="goadd()"></q-btn>
</template>
<template v-slot:body-cell-Type="props">
<q-td :props="props">
<span v-if="props.row.Type==1">图文</span>
<span v-if="props.row.Type==2">图片</span>
</q-td>
</template>
<template v-slot:body-cell-optioned="props">
<q-td :props="props">
<q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
label="编辑" @click="goDetailed(props.row,'0')" />
<q-btn flat size="xs" icon="delete" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
label="删除" @click="goDetailed(props.row,'0')" />
</q-td>
</template>
<template v-slot:bottom>
<q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary"
:max="pageCount" :input="true" @input="changePage" />
</template>
</q-table>
</div>
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新建文本素材</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;">
<q-select filled stack-label option-value="ID" option-label="Name" v-model="addMsg.classifyId"
ref="ID" :options="classifyList" label="分组" :dense="false" emit-value map-options />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.title" label="文本标题" style="margin-top: 20px;"
/>
<q-input clearable standout="bg-primary text-white" v-model="addMsg.content" type="textarea" label="文本内容" style="margin-top: 20px;"
/>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Isadd = false" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="savelocal()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
export default {
name: "textmaterial",
data() {
return {
loading: false,
Isadd: false,
data: [{
Type: 1,
title: '测试文本',
Content: '测试文本',
source: '本地上传',
CreatorName: '小张',
UpdateTime: '2021-08-04 15:48'
}],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 10,
rowsPerPage: 10,
Month: '',
TeacherId: 0,
State: 0,
},
//公告column
columns: [{
name: 'title',
field: 'title',
label: '标题',
align: 'left'
},
{
name: 'Content',
field: 'Content',
label: '内容',
align: 'left',
},
{
name: 'CreatorName',
field: 'CreatorName',
label: '上传者',
align: 'left'
},
{
name: 'source',
field: 'source',
label: '素材来源',
align: 'left'
},
{
name: 'Type',
field: 'Type',
label: '类型',
align: 'left'
},
{
name: 'UpdateTime',
field: 'UpdateTime',
label: '添加时间',
align: 'left'
},
{
name: 'optioned',
label: '操作',
field: 'DeptId'
}
],
classifyList: [
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
],
addMsg: {
Id: 0,
classifyId: '',
title: '',
content: '',
}
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e) {
},
goadd() {
this.Isadd = true
}
}
}
</script>
<style>
.textmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.textmaterial .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.textmaterial .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.textmaterial .el-date-editor.el-input {
width: 100%;
}
.textmaterial .el-date-editor.el-input input {
background-color: transparent !important;
}
.textmaterial .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.textmaterial .el-drawer.rtl {
overflow: inherit;
}
</style>
\ No newline at end of file
src/components/enterprise/material/videomaterial.vue 0 → 100644
View file @ c8b340af
<template>
<div class="videomaterial" style="padding: 0;margin: 0;">
<div class="page-content">
<div>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="add" label="上传视频"
@click="goadd()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;">
<q-card class="imgcard" v-for="(x,y) in data" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="data[y].check = !data[y].check">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
<span>{{x.UpdateTime}}</span>
<!-- <q-btn class="q-mr-md" label="编辑" size="xs" color="accent" style="margin-right: 0;" @click.stop="goedit(x)" /> -->
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i>
</div>
<video width="260" height="180" controls="controls" >
<source :src="x.Content" type="video/ogg" />
<source :src="x.Content" type="video/mp4" />
<source :src="x.Content" type="video/webm" />
</video>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.CreatorName}}</div>
<div class="onetext" style="margin-top: 5px;">来源:{{x.source}}</div>
</q-card-section>
</q-card>
</div>
</div>
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新增视频</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="ID" option-label="Name" v-model="addMsg.classifyId"
ref="ID" :options="classifyList" label="分组" :dense="false" emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传视频:</div>
<video width="320" height="240" controls="controls" v-if="addMsg.img!=''" >
<source :src="addMsg.img" type="video/ogg" />
<source :src="addMsg.img" type="video/mp4" />
<source :src="addMsg.img" type="video/webm" />
</video>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传"></q-btn>
</el-upload>
<div style="margin-top: 20px;">
(视频上传大小不超过10M，支持MP4格式)
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Isadd = false" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="submit()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
const addobj = { Id: 0, classifyId: '', img: '', }
export default {
name: "videomaterial",
data() {
return {
loading: false,
Isadd: false,
data: [{
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060508405370000000004.mp4',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060508405370000000004.mp4',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060508405370000000004.mp4',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
},],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 18,
},
classifyList: [
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
],
addMsg: Object.assign({}, addobj),
audioDuration: 0,
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e) {
},
goadd() {
this.Isadd = true;
this.addMsg = Object.assign({}, addobj)
},
goedit(x) {
this.Isadd = true;
this.addMsg.img = x.Content
},
uploadFile(file) {//图片上传
// 文件类型进行判断
const isLt10M = file.size / 1024 / 1024 < 10;
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -1) {
this.$q.notify({
type: 'negative',
message: `请上传正确的视频格式!`,
position: 'top'
})
return false;
}
if (!isLt10M) {
this.$q.notify({
type: 'negative',
message: `上传视频大小不能超过10MB哦!`,
position: 'top'
})
return false;
}
UploadSelfFile("course", file, res => {
if (res.Code == 1) {
this.addMsg.img = res.FileUrl;
console.log(res.FileUrl)
}
});
},
submit() {//提交
}
}
}
</script>
<style>
.videomaterial .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.videomaterial .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.videomaterial .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.videomaterial .el-date-editor.el-input {
width: 100%;
}
.videomaterial .el-date-editor.el-input input {
background-color: transparent !important;
}
.videomaterial .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.videomaterial .el-drawer.rtl {
overflow: inherit;
}
.videomaterial .imgcard {
width: 300px;
margin: 0 15px 15px 0
}
.videomaterial .imgstyle {
width: 100%;
height: 45px;
border-radius: 0;
}
.videomaterial .onetext {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 260px;
}
</style>
\ No newline at end of file
src/pages/enterprise/addWelcome.vue
View file @ c8b340af
......@@ -48,6 +48,14 @@
<div class="boxl_title">
<span style="margin-left:24px ;color: rgba(0,0,0,.85); font-weight: 500; font-size: 16px;">客户账号</span>
</div>
<div style="padding: 20px;">
<div style="display: flex;align-items: flex-start;">
<i class="el-icon-user" style="margin-right:20px;font-size: 40px;color: #1890ff;"></i>
<div style="width: 1px; flex:1;background: #f3f6fb;word-wrap: break-word;padding: 10px;border-radius: 4px;min-height: 40px;">
{{addMsg.Content}}
</div>
</div>
</div>
</div>
<div class="box_r">
<el-form ref="addMsg" :model="addMsg" label-width="120px">
......@@ -99,7 +107,7 @@
<!-- 人员选择 -->
<el-dialog custom-class='w700' title="选择人员" :visible.sync="outerVisible" center>
<div class="fl" style="width: 300px; margin: 0 20px;">
<p style="margin: 0 0 10px 0;">选择： <el-input class='w200' placeholder="输入关键字进行过滤" v-model="filterText">
<p style="margin: 0 0 10px 0;">选择： <el-input class='w200' placeholder="输入关键字进行过滤" v-model="filterText" @input="">
</el-input>
</p>
<el-tree class='ApprovalProcessBg' :data="memberList" show-checkbox :filter-node-method="filterNode"
......
src/pages/enterprise/materialManage.vue 0 → 100644
View file @ c8b340af
<template>
<div class="materialManage page-body">
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3">
<q-select filled stack-label @input="resetSearch" option-value="ID" option-label="Name"
v-model="msg.classifyId" ref="ID" :options="classifyList" label="分组" :dense="false" emit-value
map-options />
</div>
<div class="col-3">
<q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Name"
label="输入搜索内容" maxlength="20" />
</div>
</div>
</div>
<div class="page-content">
<q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
<q-tab :ripple="false" name="first" label="所有" />
<q-tab :ripple="false" name="second" label="文本" />
<q-tab :ripple="false" name="third" label="图片" />
<q-tab :ripple="false" name="fourth" label="图文" />
<q-tab :ripple="false" name="five" label="音频" />
<q-tab :ripple="false" name="six" label="视频" />
<q-tab :ripple="false" name="seven" label="小程序" />
<q-tab :ripple="false" name="eight" label="文件" />
</q-tabs>
<div v-if="tabCheck=='first'" >
 <allmaterial></allmaterial>
</div>
<div v-if="tabCheck=='second'" >
 <textmaterial></textmaterial>
</div>
<div v-if="tabCheck=='third'" >
 <imgmaterial></imgmaterial>
</div>
<div v-if="tabCheck=='fourth'" >
 <imgtextmaterial></imgtextmaterial>
</div>
<div v-if="tabCheck=='five'" >
 <audiomaterial></audiomaterial>
</div>
<div v-if="tabCheck=='six'" >
 <videomaterial></videomaterial>
</div>
<div v-if="tabCheck=='eight'" >
 <filematerial></filematerial>
</div>
</div>
</div>
</template>
<script>
import allmaterial from '../../components/enterprise/material/allmaterial'
import textmaterial from '../../components/enterprise/material/textmaterial'
import imgmaterial from '../../components/enterprise/material/imgmaterial'
import imgtextmaterial from '../../components/enterprise/material/imgtextmaterial'
import audiomaterial from '../../components/enterprise/material/audiomaterial'
import videomaterial from '../../components/enterprise/material/videomaterial'
import filematerial from '../../components/enterprise/material/filematerial'
export default {
components: {
allmaterial,//所有列表
textmaterial,
imgmaterial,
imgtextmaterial,
audiomaterial,
videomaterial,
filematerial
},
meta: {
title: "素材库"
},
name: "materialManage",
data() {
return {
loading: false,
pageCount: 0,
tabCheck:'first',
msg: {
pageIndex: 1,
pageSize: 10,
rowsPerPage: 10,
classifyId:0,
Name:'',
},
classifyList: [
{ Name: '全部', ID: 0, },
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
{ Name: '销售', ID: 4, },
{ Name: '趣味', ID: 5, },
],
}
},
created() {
},
methods: {
changePage(e) {
},
getList(){
},
goadd() {
this.$router.push({
path: '/enterprise/addWelcome',
});
},
resetSearch(){
this.msg.pageIndex = 1;
this.getList()
}
}
}
</script>
<style>
.materialManage .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.materialManage .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.materialManage .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.materialManage .el-date-editor.el-input {
width: 100%;
}
.materialManage .el-date-editor.el-input input {
background-color: transparent !important;
}
.materialManage .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.materialManage .el-drawer.rtl {
overflow: inherit;
}
.materialupload {
width: 118px;
height: 118px;
border-radius: 4px;
border: 1px dashed #d9d9d9;
background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
</style>
\ No newline at end of file
src/router/routes.js
View file @ c8b340af
......@@ -1140,6 +1140,18 @@ const routes = [{
component: () =>
import("pages/enterprise/addWelcome")
},
{
path: "/enterprise/materialManage", //企微 素材管理
component: () =>
import("pages/enterprise/materialManage")
},
{
path: "/enterprise/groupingManage", //企微 分组管理
component: () =>
import("pages/enterprise/groupingManage")
},
],
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment