301 lines
9.7 KiB
Vue
301 lines
9.7 KiB
Vue
|
|
<template>
|
|
<el-dialog
|
|
:title="textOptTitle"
|
|
:visible="true"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
:before-close="handleClose"
|
|
width="80%"
|
|
>
|
|
<div v-loading="submitLoading" class="source-edit">
|
|
<div v-for="(item, index) in platformRows" :key="index">
|
|
<el-card v-if="permissionsSysOriginCode.includes(item.sysOrigin.value)" class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<div style="display: inline-block;">
|
|
<div class="flex-l">
|
|
<div><sys-origin-icon :icon="item.sysOrigin.value" :desc="item.value" /></div>
|
|
<div style="padding: 0rem 10px;">{{ $t('pages.badgeManagement.message.sourceTitle', { origin: item.sysOrigin.value }) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="edit-content-form">
|
|
<el-form ref="form" label-width="110px" inline>
|
|
<el-form-item prop="selectUrl">
|
|
<el-upload
|
|
:disabled="item.selectUrlUpload.loading"
|
|
:file-list="item.selectUrlUpload.fileList"
|
|
:class="{'upload-but-hide': !isShowUpload(item, 'selectUrlUpload')}"
|
|
action=""
|
|
list-type="picture-card"
|
|
:http-request="file => uploadSelectUrl(file, item)"
|
|
:show-file-list="!isShowUpload(item, 'selectUrlUpload')"
|
|
:on-remove="(file, fileList) => handleSelectUrlFileRemove(item)"
|
|
accept="image/*"
|
|
>
|
|
<i slot="default" v-loading="item.selectUrlUpload.loading" class="el-icon-plus" />
|
|
</el-upload>
|
|
<div class="el-upload__tip">{{ $t('pages.badgeManagement.message.selectedImage') }}</div>
|
|
</el-form-item>
|
|
<el-form-item prop="notSelectUrl">
|
|
<el-upload
|
|
:disabled="item.notSelectUrlUpload.loading"
|
|
:file-list="item.notSelectUrlUpload.fileList"
|
|
:class="{'upload-but-hide': !isShowUpload(item, 'notSelectUrlUpload')}"
|
|
action=""
|
|
list-type="picture-card"
|
|
:http-request="file => uploadNotSelectUrl(file, item)"
|
|
:show-file-list="!isShowUpload(item, 'notSelectUrlUpload')"
|
|
:on-remove="(file, fileList) => handleNotSelectUrlFileRemove(item)"
|
|
accept="image/*"
|
|
>
|
|
<i slot="default" v-loading="item.notSelectUrlUpload.loading" class="el-icon-plus" />
|
|
</el-upload>
|
|
<div class="el-upload__tip">{{ $t('pages.badgeManagement.message.notSelectedImage') }}</div>
|
|
</el-form-item>
|
|
<el-form-item prop="animationUrl">
|
|
<el-upload
|
|
action=""
|
|
:http-request="file => svgaSourceUpload(file, item)"
|
|
:on-remove="(file, fileList) => svgaSourceUploadRemove(item)"
|
|
:file-list="item.svgaSourceUpload.fileList"
|
|
:limit="1"
|
|
:on-exceed="handleExceed"
|
|
>
|
|
<el-button size="small" type="primary">{{ $t('pages.badgeManagement.message.upload') }}</el-button>
|
|
<div slot="tip" class="el-upload__tip">{{ $t('pages.badgeManagement.message.svgaSourceFile') }}</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { saveOrUpdateBadgePicture } from '@/api/badge'
|
|
import { sysOriginPlatforms } from '@/constant/origin'
|
|
import { deepClone, getElementUiUploadFile } from '@/utils'
|
|
import { mapGetters } from 'vuex'
|
|
function getFormData() {
|
|
return {
|
|
id: '',
|
|
badgeConfigId: '',
|
|
sysOrigin: '',
|
|
selectUrl: '',
|
|
notSelectUrl: '',
|
|
animationUrl: ''
|
|
}
|
|
}
|
|
export default {
|
|
name: 'BadgeSource',
|
|
props: {
|
|
row: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tableRow: {},
|
|
platformRows: [],
|
|
sysOriginPlatforms,
|
|
|
|
// ---
|
|
pushTextHistoryLoading: false,
|
|
pushTextHistoryVisible: false,
|
|
fileList: [],
|
|
pushTextHistory: [],
|
|
badgeList: [],
|
|
list: [],
|
|
total: 0,
|
|
listQuery: {
|
|
cursor: 1,
|
|
limit: 20,
|
|
badgeName: '',
|
|
badgeKey: ''
|
|
},
|
|
formVisible: false,
|
|
textOptTitle: '',
|
|
form: getFormData(),
|
|
submitLoading: false,
|
|
rules: {
|
|
selectUrl: [
|
|
{ required: true, message: this.$t('pages.badgeManagement.validation.selectImage'), trigger: 'change' }
|
|
],
|
|
notSelectUrl: [
|
|
{ required: true, message: this.$t('pages.badgeManagement.validation.notSelectedImage'), trigger: 'change' }
|
|
]
|
|
},
|
|
listLoading: true,
|
|
uploadLoading: false,
|
|
uploadUrlLoading: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['permissionsSysOriginPlatforms']),
|
|
permissionsSysOriginCode() {
|
|
if (!this.permissionsSysOriginPlatforms) {
|
|
return []
|
|
}
|
|
return this.permissionsSysOriginPlatforms.map(item => item.value)
|
|
},
|
|
isUpdate() {
|
|
return this.row && this.row.id
|
|
},
|
|
isShowSelectUrlUpload() {
|
|
return !this.form.smallCover
|
|
}
|
|
},
|
|
watch: {
|
|
row: {
|
|
handler(newVal) {
|
|
if (!newVal) {
|
|
return
|
|
}
|
|
this.tableRow = deepClone(newVal)
|
|
this.platformRows = this.initPlatformRow(newVal.badgePictures)
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
isShowUpload(item, typeKey) {
|
|
return !item[typeKey].uploadUrl
|
|
},
|
|
uploadSelectUrl(file, item) {
|
|
const that = this
|
|
item.selectUrlUpload.loading = true
|
|
that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => {
|
|
item.selectUrlUpload.uploadUrl = that.$getAccessImgUrl(res.name)
|
|
that.changeSelectUrl(item)
|
|
}).catch(er => {
|
|
item.selectUrlUpload.loading = false
|
|
})
|
|
},
|
|
handleSelectUrlFileRemove(item) {
|
|
item.selectUrlUpload.uploadUrl = ''
|
|
this.changeSelectUrl(item)
|
|
},
|
|
changeSelectUrl(item) {
|
|
item.selectUrlUpload.loading = true
|
|
saveOrUpdateBadgePicture({
|
|
sysOrigin: item.sysOrigin.value,
|
|
badgeConfigId: item.source.badgeConfigId,
|
|
selectUrl: item.selectUrlUpload.uploadUrl
|
|
}).then(res => {
|
|
item.selectUrlUpload.loading = false
|
|
}).catch(er => {
|
|
item.selectUrlUpload.loading = false
|
|
console.error(er)
|
|
})
|
|
},
|
|
uploadNotSelectUrl(file, item) {
|
|
const that = this
|
|
item.notSelectUrlUpload.loading = true
|
|
that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => {
|
|
item.notSelectUrlUpload.uploadUrl = that.$getAccessImgUrl(res.name)
|
|
that.changeNotSelectUrl(item)
|
|
}).catch(er => {
|
|
item.notSelectUrlUpload.loading = false
|
|
})
|
|
},
|
|
handleNotSelectUrlFileRemove(item) {
|
|
item.notSelectUrlUpload.uploadUrl = ''
|
|
this.changeNotSelectUrl(item)
|
|
},
|
|
changeNotSelectUrl(item) {
|
|
item.notSelectUrlUpload.loading = true
|
|
saveOrUpdateBadgePicture({
|
|
sysOrigin: item.sysOrigin.value,
|
|
badgeConfigId: item.source.badgeConfigId,
|
|
notSelectUrl: item.notSelectUrlUpload.uploadUrl
|
|
}).then(res => {
|
|
item.notSelectUrlUpload.loading = false
|
|
}).catch(er => {
|
|
item.notSelectUrlUpload.loading = false
|
|
console.error(er)
|
|
})
|
|
},
|
|
svgaSourceUpload(file, item) {
|
|
const that = this
|
|
item.svgaSourceUpload.loading = true
|
|
that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => {
|
|
item.svgaSourceUpload.uploadUrl = that.$getAccessImgUrl(res.name)
|
|
that.changeSvgaSourcetUrl(item)
|
|
}).catch(er => {
|
|
item.svgaSourceUpload.loading = false
|
|
})
|
|
},
|
|
svgaSourceUploadRemove(item) {
|
|
item.svgaSourceUpload.loading = true
|
|
item.svgaSourceUpload.uploadUrl = ''
|
|
this.changeSvgaSourcetUrl(item)
|
|
},
|
|
changeSvgaSourcetUrl(item) {
|
|
saveOrUpdateBadgePicture({
|
|
sysOrigin: item.sysOrigin.value,
|
|
badgeConfigId: item.source.badgeConfigId,
|
|
animationUrl: item.svgaSourceUpload.uploadUrl
|
|
}).then(res => {
|
|
item.svgaSourceUpload.loading = false
|
|
}).catch(er => {
|
|
item.svgaSourceUpload.loading = false
|
|
console.error(er)
|
|
})
|
|
},
|
|
initPlatformRow(badgePictures) {
|
|
const group = {}
|
|
const tmpBadgePictures = badgePictures || []
|
|
tmpBadgePictures.forEach(item => {
|
|
group[item.sysOrigin] = item
|
|
})
|
|
return sysOriginPlatforms.map(item => {
|
|
const source = group[item.value] || { sysOrigin: item, badgeConfigId: this.tableRow.id }
|
|
return {
|
|
sysOrigin: item,
|
|
source,
|
|
selectUrlUpload: {
|
|
loading: false,
|
|
fileList: getElementUiUploadFile(source.selectUrl),
|
|
uploadUrl: source.selectUrl
|
|
},
|
|
notSelectUrlUpload: {
|
|
loading: false,
|
|
fileList: getElementUiUploadFile(source.notSelectUrl),
|
|
uploadUrl: source.notSelectUrl
|
|
},
|
|
svgaSourceUpload: {
|
|
loading: false,
|
|
fileList: getElementUiUploadFile(source.animationUrl),
|
|
uploadUrl: source.animationUrl
|
|
}
|
|
}
|
|
})
|
|
},
|
|
handleClose() {
|
|
this.$emit('close')
|
|
},
|
|
handleExceed(files, fileList) {
|
|
this.$opsMessage.warn(this.$t('pages.badgeManagement.message.fileLimit', {
|
|
selected: files.length,
|
|
total: files.length + fileList.length
|
|
}))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.source-edit {
|
|
height: 500px;
|
|
overflow: auto;
|
|
.box-card {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
</style>
|