DeXun/fad-dashboard
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
砂糖
2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

496
frontend/packages/SourceList/EditForm.vue Normal file
View File

@@ -0,0 +1,496 @@
<template>
<div>
<el-dialog
:close-on-click-modal="false"
:title="title ? '编辑' : '新增'"
:visible.sync="formVisible"
:append-to-body="true"
class="bs-dialog-wrap bs-el-dialog"
@close="closeAddDialog"
>
<el-form
ref="dataForm"
:model="dataForm"
:rules="dataFormRules"
label-position="right"
label-width="100px"
class="bs-el-form"
>
<el-form-item
label="名称"
prop="name"
>
<el-input
v-model="dataForm.name"
autocomplete="off"
placeholder="请输入名称"
clearable
maxlength="30"
class="bs-el-input"
/>
</el-form-item>
<el-form-item
label="推荐分辨率"
>
<el-select
v-model="resolutionRatioValue"
class="bs-el-select"
popper-class="bs-el-select"
placeholder="请选择分辨率"
clearable
>
<el-option
v-for="resolutionRatioItem in resolutionRatioOptions"
:key="resolutionRatioItem.value"
:label="resolutionRatioItem.label"
:value="resolutionRatioItem.value"
/>
</el-select>
</el-form-item>
<el-form-item
label="大屏宽度"
>
<el-input-number
v-model="resolutionRatio.w"
:min="100"
:max="8000"
class="bs-el-input-number"
/>
</el-form-item>
<el-form-item
label="大屏高度"
>
<el-input-number
v-model="resolutionRatio.h"
:min="100"
:max="8000"
class="bs-el-input-number"
/>
</el-form-item>
<el-form-item label="排序">
<el-input-number
v-model="dataForm.orderNum"
:min="0"
:max="30000"
controls-position="right"
class="bs-el-input-number"
/>
</el-form-item>
</el-form>
<div
slot="footer"
class="dialog-footer"
>
<el-button
class="bs-el-button-default"
@click="closeAddDialog"
>
取消
</el-button>
<el-button
v-if="title"
type="primary"
:loading="toDesignLoading"
:disabled="toDesignDisabled"
@click="addOrUpdate(true)"
>
设计
</el-button>
<el-button
type="primary"
:loading="sureLoading"
:disabled="sureDisabled"
@click="addOrUpdate(!title)"
>
确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Icon from 'data-room-ui/assets/images/dataSourceIcon/export'
export default {
name: 'EditForm',
components: {
},
props: {
},
data () {
return {
resolutionRatioValue: '1920*1080',
resolutionRatio: {
w: 1920,
h: 1080
},
resolutionRatioOptions: [
{
value: '1024*768',
label: '1024*768'
},
{
value: '1280*720',
label: '1280*720'
},
{
value: '1920*1080',
label: '1920*1080'
},
{
value: '2560*1440',
label: '2560*1440'
},
{
value: '3840*2160',
label: '3840*2160'
},
{
value: '5120*2880',
label: '5120*2880'
},
{
value: '7680*4320',
label: '7680*4320'
}
],
formVisible: false,
title: '', // 弹框标题(新增/编辑)
dataForm: {
id: '',
type: 'bigScreen',
name: '',
icon: '',
code: '',
remark: '',
iconColor: '#007aff',
components: '',
style: '',
formType: '',
formConfig: '',
pageTemplateId: ''
},
dataFormRules: {
name: [
{ required: true, message: '名称不能为空', trigger: 'blur' }
]
},
sureLoading: false,
toDesignLoading: false,
sureDisabled: false,
toDesignDisabled: false
}
},
computed: {},
watch: {
resolutionRatioValue (val) {
if (val) {
this.resolutionRatio.w = val.split('*')[0]
this.resolutionRatio.h = val.split('*')[1]
} else {
this.resolutionRatio.w = 1920
this.resolutionRatio.h = 1080
}
}
},
mounted () {},
methods: {
// 关闭弹窗时
closeAddDialog () {
this.formVisible = false
this.$refs.dataForm.resetFields()
},
// 初始化
init (nodeData, parentNode) {
this.title = ''
const code = nodeData ? nodeData.code : ''
this.formVisible = true
this.$nextTick(() => {
if (code) {
this.$dataRoomAxios.get(`/bigScreen/design/info/code/${code}`).then((resp) => {
this.$set(this, 'title', resp.name)
this.$set(this.dataForm, 'name', resp.name)
this.$set(this.dataForm, 'chartList', resp.chartList)
this.$set(this.dataForm, 'code', resp.code)
this.$set(this.dataForm, 'icon', resp.icon)
this.$set(this.dataForm, 'iconColor', resp.iconColor)
this.$set(this.dataForm, 'id', resp.id)
this.$set(this.dataForm, 'parentCode', resp.parentCode === '0' ? '' : resp.parentCode)
this.$set(this.dataForm, 'remark', resp.remark)
this.$set(this.dataForm, 'style', resp.style)
this.$set(this.dataForm, 'type', resp.type)
this.$set(this.dataForm, 'orderNum', nodeData.orderNum)
this.$set(this.dataForm, 'pageTemplateId', resp?.pageTemplateId)
this.$set(this.dataForm, 'pageConfig', resp?.pageConfig)
if (this.dataForm.type === 'bigScreen') {
const { w, h } = resp.pageConfig
this.resolutionRatio.w = w
this.resolutionRatio.h = h
this.resolutionRatioValue = `${w}*${h}`
}
})
} else {
this.$set(this.dataForm, 'name', '')
this.$set(this.dataForm, 'chartList', [])
this.$set(this.dataForm, 'code', '')
this.$set(this.dataForm, 'icon', Icon.getNameList()[0])
this.$set(this.dataForm, 'iconColor', '#007aff')
this.$set(this.dataForm, 'id', '')
this.$set(this.dataForm, 'parentCode', parentNode.code)
this.$set(this.dataForm, 'remark', '')
this.$set(this.dataForm, 'style', '')
this.$set(this.dataForm, 'type', this.dataForm.type)
this.$set(this.dataForm, 'orderNum', 0)
this.$set(this.dataForm, 'pageTemplateId', '')
this.$set(this.dataForm, 'pageConfig', {
w: '1920',
h: '1080',
bgColor: '#151a26',
opacity: 100,
customTheme: 'auto',
bg: null,
lightBgColor: '#f5f7fa',
lightBg: null
})
if (this.dataForm.type === 'bigScreen') {
this.resolutionRatio.w = '1920'
this.resolutionRatio.h = '1080'
}
}
})
},
// 点击确定时
addOrUpdate (isToDesign = false) {
this.addOrUpdateBigScreen(isToDesign)
},
// 大屏 新增/编辑
async addOrUpdateBigScreen (isToDesign) {
this.$refs.dataForm.validate(async (valid) => {
if (!valid) {
return
}
const addOrUpdateHandel = !this.dataForm.code
? (form) => this.$dataRoomAxios.post('/bigScreen/design/add', form)
: (form) => this.$dataRoomAxios.post('/bigScreen/design/update', form)
const form = {
className: 'com.gccloud.dataroom.core.module.manage.dto.DataRoomPageDTO',
chartList: this.dataForm.chartList,
code: this.dataForm.code,
icon: this.dataForm.icon,
iconColor: this.dataForm.iconColor,
id: this.dataForm.id,
name: this.dataForm.name,
parentCode: this.dataForm.parentCode,
remark: this.dataForm.remark,
style: this.dataForm.style,
type: 'bigScreen',
orderNum: this.dataForm.orderNum,
pageConfig: this.dataForm.pageConfig,
pageTemplateId: this.dataForm.pageTemplateId
}
if (isToDesign) {
this.toDesignLoading = true
this.sureDisabled = true
} else {
this.sureLoading = true
this.toDesignDisabled = true
}
addOrUpdateHandel(form)
.then((code) => {
this.formVisible = false
const message = this.dataForm.code ? '更新成功' : '新建成功'
this.$message.success(message)
this.$emit('refreshData', form, this.dataForm.id)
if (isToDesign) {
this.toDesignLoading = false
this.sureDisabled = false
form.code = code || this.dataForm.code
this.toDesign({ ...form })
} else {
this.sureLoading = false
this.toDesignDisabled = false
}
})
.catch(() => {
this.sureLoading = false
this.toDesignLoading = false
this.sureDisabled = false
this.toDesignDisabled = false
})
})
},
// 跳转设计态
toDesign (form) {
// const { href: bigScreenHref } = this.$router.resolve({
// path: window.BS_CONFIG?.routers?.designUrl || '/big-screen/design',
// query: {
// code: form.code
// }
// })
// window.open(bigScreenHref, '_self')
this.$router.push({
path: window.BS_CONFIG?.routers?.designUrl || '/big-screen/design',
query: {
code: form.code
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/style/bsTheme.scss';
.el-scrollbar {
height: 300px;
overflow-x: hidden;
::v-deep .el-scrollbar__view {
overflow-x: hidden;
}
}
.color-picker {
display: flex;
align-items: center;
}
.icon-svg {
width: 25px;
height: 25px;
}
.color-select {
width: 350px;
display: flex;
margin-top: 5px;
align-items: center;
justify-content: space-between;
div {
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
}
::v-deep .el-color-picker__trigger {
top: 0;
right: 0;
width: 21px;
height: 21px;
padding: 0;
}
.el-icon-check {
font-size: 20px;
color: #ffffff;
position: absolute;
}
}
.icon-list {
margin-top: 15px;
padding: 5px;
border-radius: 5px;
border: 1px solid #e8e8e8;
.el-button--mini {
min-width: 37px;
padding: 5px !important;
border: 1px solid transparent !important;
&:hover {
background-color: rgba(217, 217, 217, 0.3);
}
}
}
.icon-uploader {
width: 60px;
height: 60px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.icon-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}
.icon {
width: 60px;
height: 60px;
display: block;
}
.default-layout-box {
display: flex;
flex-wrap: wrap;
.default-layout-item {
cursor: pointer;
margin: 9px;
display: flex;
flex-direction: column;
align-items: center;
.component-name {
font-size: 12px;
}
.sampleImg {
margin: 0 auto;
width: 102px;
height: 73px;
display: block;
}
.img_dispaly {
margin: 0 auto;
text-align: center;
width: 100px;
height: 70px;
line-height: 70px;
background-color: #D7D7D7;
color: #999;
}
.demonstration {
text-align: center;
}
}
.default-layout-item:hover {
cursor: pointer;
}
::v-deep .el-radio__label {
display: none;
}
}
/*滚动条样式*/
::v-deep ::-webkit-scrollbar {
width: 6px;
border-radius: 4px;
height: 4px;
}
::v-deep ::-webkit-scrollbar-thumb {
background: #dddddd !important;
border-radius: 10px;
}
.catalog-cascader {
width: 100% !important;
}
</style>

1
frontend/packages/SourceList/images/audio.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991594397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1987" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M147.2 0C102.4 0 65.6 36.8 65.6 81.6v860.8c0 44.8 36.8 81.6 81.6 81.6h731.2c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0H147.2z" fill="#379FD3" p-id="1988"></path><path d="M960 326.4v16H755.2s-100.8-20.8-97.6-108.8c0 0 3.2 92.8 96 92.8H960z" fill="#2987C8" p-id="1989"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1990"></path><path d="M540.8 544l-227.2 30.4v214.4c-11.2-3.2-25.6-4.8-40-1.6-32 6.4-52.8 27.2-46.4 46.4 6.4 20.8 36.8 30.4 68.8 24 28.8-4.8 48-22.4 48-40V646.4l166.4-20.8v132.8c-11.2-3.2-25.6-3.2-40 0-33.6 6.4-54.4 27.2-48 46.4 6.4 19.2 36.8 30.4 70.4 24 28.8-6.4 49.6-24 48-41.6V544z" fill="#FFFFFF" p-id="1991"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
frontend/packages/SourceList/images/excel.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991575786" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1673" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#45B058" p-id="1674"></path><path d="M374.4 862.4c-3.2 0-6.4-1.6-8-3.2l-59.2-80-60.8 80c-1.6 1.6-4.8 3.2-8 3.2-6.4 0-11.2-4.8-11.2-11.2 0-1.6 0-4.8 1.6-6.4l62.4-81.6-57.6-78.4c-1.6-1.6-3.2-3.2-3.2-6.4 0-4.8 4.8-11.2 11.2-11.2 4.8 0 8 1.6 9.6 4.8l56 73.6 54.4-73.6c1.6-3.2 4.8-4.8 8-4.8 6.4 0 12.8 4.8 12.8 11.2 0 3.2-1.6 4.8-1.6 6.4l-59.2 76.8 62.4 83.2c1.6 1.6 3.2 4.8 3.2 6.4 0 6.4-6.4 11.2-12.8 11.2z m160-1.6H448c-9.6 0-17.6-8-17.6-17.6V678.4c0-6.4 4.8-11.2 12.8-11.2 6.4 0 11.2 4.8 11.2 11.2v161.6h80c6.4 0 11.2 4.8 11.2 9.6 0 6.4-4.8 11.2-11.2 11.2z m112 3.2c-28.8 0-51.2-9.6-67.2-24-3.2-1.6-3.2-4.8-3.2-8 0-6.4 3.2-12.8 11.2-12.8 1.6 0 4.8 1.6 6.4 3.2 12.8 11.2 32 20.8 54.4 20.8 33.6 0 44.8-19.2 44.8-33.6 0-49.6-113.6-22.4-113.6-89.6 0-32 27.2-54.4 65.6-54.4 24 0 46.4 8 60.8 20.8 3.2 1.6 4.8 4.8 4.8 8 0 6.4-4.8 12.8-11.2 12.8-1.6 0-4.8-1.6-6.4-3.2-14.4-11.2-32-16-49.6-16-24 0-40 11.2-40 30.4 0 43.2 113.6 17.6 113.6 89.6 0 27.2-19.2 56-70.4 56z" fill="#FFFFFF" p-id="1675"></path><path d="M960 326.4v16H755.2s-102.4-20.8-99.2-108.8c0 0 3.2 92.8 96 92.8h208z" fill="#349C42" p-id="1676"></path><path d="M656 0v233.6c0 25.6 19.2 92.8 99.2 92.8H960L656 0z" fill="#FFFFFF" opacity=".5" p-id="1677"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
frontend/packages/SourceList/images/pdf.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991649675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2144" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#8C181A" p-id="2145"></path><path d="M960 326.4v16H755.2s-100.8-20.8-97.6-107.2c0 0 3.2 91.2 96 91.2H960z" fill="#6B0D12" p-id="2146"></path><path d="M657.6 0v233.6c0 27.2 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="2147"></path><path d="M302.4 784h-52.8v65.6c0 6.4-4.8 11.2-12.8 11.2-6.4 0-11.2-4.8-11.2-11.2V686.4c0-9.6 8-17.6 17.6-17.6h59.2c38.4 0 60.8 27.2 60.8 57.6 0 32-22.4 57.6-60.8 57.6z m-1.6-94.4h-51.2v73.6h51.2c22.4 0 38.4-14.4 38.4-36.8s-16-36.8-38.4-36.8z m166.4 171.2h-48c-9.6 0-17.6-8-17.6-17.6v-156.8c0-9.6 8-17.6 17.6-17.6h48c59.2 0 99.2 41.6 99.2 96s-38.4 96-99.2 96z m0-171.2h-41.6v148.8h41.6c46.4 0 73.6-33.6 73.6-75.2 1.6-40-25.6-73.6-73.6-73.6z m260.8 0h-92.8V752h91.2c6.4 0 9.6 4.8 9.6 11.2s-4.8 9.6-9.6 9.6h-91.2v76.8c0 6.4-4.8 11.2-12.8 11.2-6.4 0-11.2-4.8-11.2-11.2V686.4c0-9.6 8-17.6 17.6-17.6h99.2c6.4 0 9.6 4.8 9.6 11.2 1.6 4.8-3.2 9.6-9.6 9.6z" fill="#FFFFFF" p-id="2148"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
frontend/packages/SourceList/images/ppt.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991587019" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1830" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#E34221" p-id="1831"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#DC3119" p-id="1832"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1833"></path><path d="M304 784h-54.4v67.2c0 6.4-4.8 11.2-11.2 11.2-6.4 0-12.8-4.8-12.8-11.2V686.4c0-9.6 8-17.6 17.6-17.6H304c38.4 0 59.2 25.6 59.2 57.6S340.8 784 304 784z m-3.2-94.4h-51.2v73.6h51.2c22.4 0 38.4-16 38.4-36.8 0-22.4-16-36.8-38.4-36.8zM480 784h-54.4v67.2c0 6.4-4.8 11.2-11.2 11.2-6.4 0-11.2-4.8-11.2-11.2V686.4c0-9.6 6.4-17.6 16-17.6H480c38.4 0 59.2 25.6 59.2 57.6S518.4 784 480 784z m-3.2-94.4h-49.6v73.6h49.6c22.4 0 38.4-16 38.4-36.8 0-22.4-16-36.8-38.4-36.8z m225.6 0h-52.8v161.6c0 6.4-4.8 11.2-11.2 11.2-6.4 0-12.8-4.8-12.8-11.2V689.6h-51.2c-6.4 0-11.2-4.8-11.2-11.2 0-4.8 4.8-9.6 11.2-9.6h128c6.4 0 11.2 4.8 11.2 11.2 0 4.8-4.8 9.6-11.2 9.6z" fill="#FFFFFF" p-id="1834"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
frontend/packages/SourceList/images/unknown.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991872321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2301" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#8199AF" p-id="2302"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#617F9B" p-id="2303"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="2304"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 723 B

1
frontend/packages/SourceList/images/video.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991554216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1202" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M147.2 0C102.4 0 65.6 36.8 65.6 81.6v860.8c0 44.8 36.8 81.6 81.6 81.6h731.2c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0H147.2z" fill="#8E4C9E" p-id="1203"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#713985" p-id="1204"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1205"></path><path d="M456 728c0 6.4-1.6 12.8-6.4 16-3.2 3.2-84.8 70.4-190.4 113.6-1.6 1.6-4.8 1.6-8 1.6s-6.4-1.6-9.6-3.2c-6.4-3.2-9.6-8-11.2-16 0-1.6-4.8-54.4-4.8-112s4.8-108.8 4.8-112c1.6-6.4 4.8-11.2 11.2-16 3.2-1.6 6.4-3.2 9.6-3.2 3.2 0 6.4 1.6 8 3.2 105.6 41.6 187.2 110.4 190.4 113.6 4.8 3.2 6.4 9.6 6.4 14.4z" fill="#FFFFFF" p-id="1206"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
frontend/packages/SourceList/images/word.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991563849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1359" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 35.2 64 80v862.4C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#14A9DA" p-id="1360"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#0F93D0" p-id="1361"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1362"></path><path d="M291.2 862.4h-48c-9.6 0-17.6-8-17.6-17.6v-158.4c0-9.6 8-16 17.6-16h48c60.8 0 99.2 41.6 99.2 96s-38.4 96-99.2 96z m0-171.2h-41.6v148.8h41.6c48 0 75.2-33.6 75.2-73.6 0-41.6-27.2-75.2-75.2-75.2z m232 174.4c-57.6 0-96-43.2-96-99.2s38.4-99.2 96-99.2c56 0 94.4 41.6 94.4 99.2 0 56-38.4 99.2-94.4 99.2z m0-177.6c-43.2 0-70.4 33.6-70.4 78.4 0 44.8 27.2 76.8 70.4 76.8 41.6 0 70.4-32 70.4-76.8S564.8 688 523.2 688z m294.4 6.4c1.6 1.6 3.2 4.8 3.2 8 0 6.4-4.8 11.2-11.2 11.2-3.2 0-6.4-1.6-8-3.2-11.2-14.4-30.4-22.4-48-22.4-41.6 0-73.6 32-73.6 78.4 0 44.8 32 76.8 73.6 76.8 17.6 0 35.2-6.4 48-20.8 1.6-3.2 4.8-4.8 8-4.8 6.4 0 11.2 6.4 11.2 12.8 0 3.2-1.6 4.8-3.2 8-14.4 16-35.2 27.2-64 27.2-56 0-99.2-40-99.2-99.2s43.2-99.2 99.2-99.2c28.8 0 49.6 11.2 64 27.2z" fill="#FFFFFF" p-id="1363"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
frontend/packages/SourceList/images/zip.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991566771" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1516" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 35.2 64 80v862.4C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#8199AF" p-id="1517"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#617F9B" p-id="1518"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1519"></path><path d="M358.4 862.4h-120c-6.4 0-12.8-4.8-12.8-12.8 0-3.2 1.6-6.4 3.2-8l105.6-150.4h-99.2c-4.8 0-9.6-4.8-9.6-11.2 0-4.8 4.8-9.6 9.6-9.6h120c6.4 0 11.2 4.8 11.2 12.8 0 3.2 0 6.4-1.6 8l-107.2 150.4h100.8c6.4 0 11.2 4.8 11.2 9.6 0 6.4-4.8 11.2-11.2 11.2z m64 1.6c-6.4 0-11.2-4.8-11.2-11.2V680c0-6.4 4.8-11.2 12.8-11.2 6.4 0 11.2 4.8 11.2 11.2v172.8c0 6.4-4.8 11.2-12.8 11.2z m142.4-78.4H512v67.2c0 6.4-6.4 11.2-12.8 11.2s-11.2-4.8-11.2-11.2V688c0-9.6 6.4-17.6 16-17.6h60.8c38.4 0 60.8 27.2 60.8 57.6s-22.4 57.6-60.8 57.6z m-3.2-94.4H512v73.6h49.6c22.4 0 38.4-14.4 38.4-36.8 0-20.8-16-36.8-38.4-36.8z" fill="#FFFFFF" p-id="1520"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

538
frontend/packages/SourceList/index.vue Normal file
View File

@@ -0,0 +1,538 @@
<template>
<div class="big-screen-list-wrap">
<div class="internal-box">
<div class="top-search-wrap">
<el-input v-model="searchKey" class="bs-el-input" clearable placeholder="请输入图片名称" prefix-icon="el-icon-search"
@clear="reSearch" @keyup.enter.native="reSearch" />
<el-select v-model="extend" class="bs-el-select" clearable placeholder="请选择图片格式" popper-class="bs-el-select"
@change="reSearch">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button style="margin-right: 10px" type="primary" @click="reSearch">
搜索
</el-button>
<el-upload :action="upLoadUrl" :before-upload="beforeUpload" :data="{ module: code }" :file-list="fileList"
:headers="headers" :on-error="uploadError" :on-success="uploadSuccess" :show-file-list="false"
class="upload-demo" multiple>
<el-button type="primary">
上传资源
</el-button>
</el-upload>
</div>
<div v-if="list.length !== 0" v-loading="loading" :style="{
display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
}" class="list-wrap bs-scrollbar" element-loading-text="加载中">
<!-- <div v-if="list.length !== 0"> -->
<div v-for="screen in list" :key="screen.id" :style="{
width: gridComputed ? 'auto' : '290px'
}" class="big-screen-card-wrap">
<div class="big-screen-card-inner">
<div class="screen-card__hover">
<div class="screen-card__hover-box">
<div class="preview">
<div class="screen-card__oper-label circle" @click="preview(screen)">
<span>预览</span>
</div>
<div class="circle" @click="downLoad(screen)">
<span>下载</span>
</div>
<div class="circle" @click="del(screen)">
<span>删除</span>
</div>
<div class="circle" @click="copy(screen)">
<span>链接</span>
</div>
</div>
</div>
</div>
<div v-if="imgExtends.includes(screen.extension)" class="big-screen-card-img">
<el-image :src="getCoverPicture(screen.url)" fit="contain" style="width: 100%; height: 100%">
<div slot="placeholder" class="image-slot">
加载中···
</div>
</el-image>
</div>
<div v-else class="big-screen-card-img">
<el-image :src="getUrl(screen)" fit="contain" style="width: 100%; height: 100%">
<div slot="placeholder" class="image-slot">
加载中···
</div>
</el-image>
</div>
<div class="big-screen-bottom">
<div :title="screen.originalName" class="left-bigscreen-title">
{{ screen.originalName }}
</div>
</div>
</div>
</div>
</div>
<div v-else class="empty">
暂无数据
</div>
<div class="footer-pagination-wrap">
<!-- <div class="footer-pagination-wrap-text">
总共 {{ totalCount }} 个项目
</div> -->
<div class="bs-pagination">
<el-pagination :current-page="current" :page-size="size" :page-sizes="[10, 20, 50, 100]" :total="totalCount"
background class="bs-el-pagination" layout="total, prev, pager, next, sizes" next-text="下一页"
popper-class="bs-el-pagination" prev-text="上一页" @current-change="currentChangeHandle"
@size-change="sizeChangeHandle" />
</div>
</div>
</div>
<!-- 新增或编辑弹窗 -->
<EditForm ref="EditForm" @refreshData="reSearch" />
</div>
</template>
<script>
import { pageMixins } from 'data-room-ui/js/mixins/page'
import EditForm from './EditForm.vue'
import { getFileUrl } from 'data-room-ui/js/utils/file'
export default {
name: 'BigScreenList',
mixins: [pageMixins],
props: {
type: {
type: String,
default: 'bigScreen' // bigScreen | template
},
catalogInfo: {
type: Object,
default: () => {
}
}
},
components: { EditForm },
data() {
return {
// upLoadUrl: window.BS_CONFIG?.httpConfigs?.baseURL + '/bigScreen/file/upload',
upLoadUrl: process.env.VUE_APP_BASE_API + '/bigScreen/file/upload',
searchKey: '',
extend: '',
sourceExtends: window.BS_CONFIG?.sourceExtends || ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico', 'xls', 'xlsx', 'csv'],
options: [],
list: [],
fileUploadParam: {},
headers: {
...window.BS_CONFIG?.httpConfigs?.headers
},
fileList: [],
loading: false,
imgExtends: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico'],
otherExtends: {
video: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'dat', 'ts', 'mts', 'vob'],
audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac', 'ape', 'm4a', 'm4r', 'amr', 'ac3'],
excel: ['xls', 'xlsx', 'csv'],
word: ['doc', 'docx'],
ppt: ['ppt', 'pptx'],
pdf: ['pdf']
}
}
},
computed: {
code() {
return this.catalogInfo?.page?.code
},
gridComputed() {
return this.list.length > 3
}
},
watch: {
code(value) {
this.current = 1
this.getDataList()
}
},
mounted() {
this.getOptions()
this.getDataList()
},
methods: {
getUrl(file) {
let extension = file.extension
if (this.otherExtends.video.includes(extension)) {
return require('./images/video.svg')
}
if (this.otherExtends.audio.includes(extension)) {
return require('./images/audio.svg')
}
if (this.otherExtends.excel.includes(extension)) {
return require('./images/excel.svg')
}
if (this.otherExtends.word.includes(extension)) {
return require('./images/word.svg')
}
if (this.otherExtends.ppt.includes(extension)) {
return require('./images/ppt.svg')
}
if (this.otherExtends.pdf.includes(extension)) {
return require('./images/pdf.svg')
}
return require('./images/unknown.svg')
},
uploadError() {
this.$message({
type: 'error',
message: '上传失败'
})
},
beforeUpload(file) {
// 获取文件后缀
const extension = file.name.split('.').pop()
// 判断文件类型是否符合要求
const isValidFileType = this.sourceExtends.includes(extension)
if (!isValidFileType) {
this.$message.error('不支持的文件类型：' + extension)
}
return isValidFileType
},
uploadSuccess(response, file, fileList) {
if (response.code === 200) {
this.$message({
type: 'success',
message: '上传成功'
})
this.getDataList()
} else {
this.$message({
type: 'error',
message: response.msg
})
}
},
getOptions() {
this.options = []
this.options.push({ label: '全部', value: '' })
this.sourceExtends.forEach((ext) => this.options.push({ label: ext, value: ext }))
},
getDataList() {
this.loading = true
this.$dataRoomAxios.get('/bigScreen/file', {
module: this.catalogInfo.page.code,
current: this.current,
size: this.size,
extension: this.extend,
searchKey: this.searchKey
})
.then((data) => {
this.list = data.list
this.totalCount = data.totalCount
})
.finally(() => {
this.loading = false
})
},
preview(screen) {
window.open(getFileUrl(screen.url), '_blank')
},
downLoad(screen) {
this.$dataRoomAxios.download(`/bigScreen/file/download/${screen.id}`)
},
del(screen) {
this.$confirm('确定删除该资源？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'bs-el-message-box'
})
.then(async () => {
this.$dataRoomAxios.post(`/bigScreen/file/delete/${screen.id}`)
.then(() => {
this.$message({
type: 'success',
message: '删除成功'
})
this.getDataList()
})
.catch(() => {
this.$message({
type: 'error',
message: '删除失败!'
})
})
})
.catch()
},
copy(screen) {
this.$message.success('复制成功')
const transfer = document.createElement('input')
document.body.appendChild(transfer)
transfer.value = getFileUrl(screen.url) // 这里表示想要复制的内容
transfer.focus()
transfer.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
}
transfer.blur()
transfer.style.display = 'none'
},
/**
* 获取封面图片,如果是相对路径则拼接上文件访问前缀地址
* @param url
* @returns {*}
*/
getCoverPicture(url) {
return getFileUrl(url)
},
}
}
</script>
<style lang="scss" scoped>
@import '../assets/style/bsTheme.scss';
.big-screen-list-wrap {
.el-select {
display: inline-block !important;
position: relative !important;
width: auto !important;
}
position: relative;
height: calc(100%);
// height: calc(100% - 16px);
// padding: 16px;
color: #9ea9b2;
// margin:0 16px;
margin-left: 16px;
background-color: var(--bs-background-2) !important;
.internal-box {
height: calc(100% - 32px);
padding: 16px;
}
.top-search-wrap {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 12px;
.el-input {
width: 200px;
margin-right: 20px;
::v-deep .el-input__inner {
background-color: var(--bs-background-1) !important;
}
}
.el-select {
margin-right: 20px;
::v-deep .el-input__inner {
background-color: var(--bs-background-1) !important;
}
}
}
.list-wrap {
/* display: grid; */
overflow: auto;
padding-right: 5px;
// 间隙自适应
justify-content: space-around;
// max-height: calc(100vh - 304px);
max-height: calc(100% - 90px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px;
padding-bottom: 10px;
// ::v-deep .el-loading-mask {
// display: flex;
// align-items: center;
// justify-content: center;
// height: calc(100vh - 260px) !important;
// z-index: 999;
// top: 50px;
// }
.big-screen-card-wrap {
position: relative;
height: 230px;
cursor: pointer;
&:hover {
.screen-card__hover {
height: 230px;
}
}
.screen-card__hover {
position: absolute;
z-index: 999;
top: 0;
right: 0;
left: 0;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
height: 0;
transition: height 0.4s;
background: #00000099;
.screen-card__hover-box {
position: absolute;
width: 100%;
height: 100%;
background: #00000080;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
}
.preview {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
cursor: pointer;
color: var(--bs-el-color-primary);
.circle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--bs-el-color-primary);
border-radius: 50%;
&:hover {
color: #fff;
background: var(--bs-el-color-primary);
}
span {
font-size: 12px;
}
}
}
}
.big-screen-card-inner {
overflow: hidden;
width: 100%;
height: 100%;
cursor: pointer;
background-color: var(--bs-background-2);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
color: var(--bs-el-title);
border: 1px solid var(--bs-background-1);
&:hover {
color: var(--bs-el-text);
border: 1px solid var(--bs-el-color-primary);
}
.add-big-screen-card-text {
color: var(--bs-el-color-primary);
font-size: 24px;
}
.big-screen-card-img {
width: 100%;
height: 180px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
::v-deep .image-slot {
height: 100%;
background-color: var(--bs-background-2);
display: flex;
align-items: center;
justify-content: center;
}
::v-deep .el-image__error {
background-color: #1d1d1d;
}
}
.big-screen-bottom {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
/*height: 26px;*/
padding: 0 10px;
height: calc(100% - 180px);
color: var(--bs-el-title);
background-color: var(--bs-background-2);
.left-bigscreen-title {
font-size: 14px;
overflow: hidden;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
.right-bigscreen-time-title {
font-size: 14px;
overflow: hidden;
width: 140px;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.big-screen-card-text {
font-size: 14px;
padding: 10px;
text-align: center;
color: #333;
}
}
.big-screen-card-inner-add {
display: flex;
align-items: center;
justify-content: center;
}
}
}
.el-loading-parent--relative {
position: unset !important;
}
.footer-pagination-wrap {
right: 16px;
bottom: 16px;
position: absolute;
}
}
.bs-pagination {
::v-deep .el-input__inner {
width: 110px !important;
border: none;
background: var(--bs-el-background-1);
}
}
.empty {
width: 100%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
}
</style>