Skip to content

P
pptist
Commit 7bead4a4 authored by zhengke's avatar zhengke
Browse files
Options

双击 替换图

parent d838a7d1
Hide whitespace changes
Inline Side-by-side
Showing with 362 additions and 377 deletions
src/views/TemplateCenter/font.vue
View file @ 7bead4a4
<template>
<div class="row items-center flex-between q-mb-lg">
<div></div>
<el-input style="max-width:600px" v-model="queryObj.keyWords" placeholder="请输入关键字" class="q-pr-33" clearable
@keyup.enter="search">
<template #append>
<div class="Market-select-line absolute"></div>
<div class="row items-center pointer">
<img src="../../assets/img/home-search.png" width="21" height="21"
@click="search"/>
</div>
</template>
</el-input>
<el-button type="primary" size="default" style="color: #ffff;" @click="addFont">
新增字体
</el-button>
</div>
<el-table v-loading="loading" ref="dataTableRef" highlight-current-row
v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
<el-table-column label="字体名称" width="240">
<template #default="scope">
<span :style="{'font-family':scope.row.reduceName}">{{scope.row.label}}</span>
</template>
</el-table-column>
<el-table-column label="font-family" width="190">
<template #default="scope">
{{scope.row.fontFamily}}
</template>
</el-table-column>
<el-table-column label="url">
<template #default="scope">
{{scope.row.fontUrl}}
</template>
</el-table-column>
<el-table-column label="裁剪URL">
<template #default="scope">
{{scope.row.reduceUrl}}
</template>
</el-table-column>
<el-table-column label="操作" width="130">
<template #default="scope">
<el-button type="default" link :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
<el-button type="default" link :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 编辑字体 -->
<el-dialog v-model="datas.addEditVisible" :align-center="true" :show-close="true" :close-on-press-escape="false"
:close-on-click-modal="false" style="width: 573px;" class="small-padding" @close="close">
<template #header>
<div class="text-title text-center fz16 PingFangSC">{{datas.params.id?'编辑':'新增'}}字体</div>
</template>
<div class="addTemplateBox q-mb-lg fz14">
<div class="row flex-end q-mb-lg">
<!-- :limit="1" -->
<el-button type="primary" size="small" style="color: #ffff;">
<el-upload
ref="upload"
:on-change="(uploadFile:any, uploadFiles:any)=> uploadFontHandler(uploadFile, uploadFiles,datas.params.fontFamily)"
action=""
multiple
:auto-upload="false"
accept=".ttf, .woff, otf"
:show-file-list="false"
:on-exceed="handleExceed">
<template #trigger>
<span class="text-white">{{datas.params.id?'替换':'上传'}}字体</span>
</template>
</el-upload>
</el-button>
</div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">名称：</span>
<el-input min="750" v-model="datas.params.label"
placeholder="请输入字体名称" class=""></el-input>
<span class="q-px-md shrink">fontFamily：</span>
<el-input min="750" v-model="datas.params.fontFamily"
placeholder="请输入fontFamily" class=""></el-input>
</div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">URL：</span>
<el-input min="750" type="textarea" v-model="datas.params.fontUrl"
placeholder="请输入URL" class=""></el-input>
</div>
<div class="addTemplateInput q-mt-xs row items-center">
<span class="q-pr-md shrink">裁剪URL：</span>
<el-input min="750" type="textarea" v-model="datas.params.reduceUrl"
placeholder="请输入裁剪字体URL" class=""></el-input>
</div>
</div>
<div class="text-center">
<el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation(0)"
:loading="requestLoading">
确认{{datas.params.id?'编辑':'新增'}}
</el-button>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, inject, onMounted, watch} from "vue";
import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
import { useUserStore, useFontStore } from "@/store";
import { storeToRefs } from "pinia";
import { USER_DEFAULT_HEADER } from '@/configs/customer'
import { Edit,Delete } from '@element-plus/icons-vue';
import { ElLoading, ElMessage, ElMessageBox, UploadInstance } from 'element-plus'
import { CustomerFonts } from '@/store/font'
import {getFonts} from '@/utils/psdParser/index'
import FontService from '@/services/FontService'
import AliyunUpload from '@/utils/upload/aliyun'
import { reduceFont } from '@/utils/fonts/convertFont'
import FileService from '@/services/FileService'
const useUser = useUserStore()
const { userInfo } = storeToRefs(useUser)
const { formatFonts } = storeToRefs(useFontStore())
const userTheme = useUser.getUserTheme
<div class="row items-center flex-between q-mb-lg">
<div></div>
<el-input style="max-width:600px" v-model="queryObj.keyWords" placeholder="请输入关键字" class="q-pr-33" clearable
@keyup.enter="search">
<template #append>
<div class="Market-select-line absolute"></div>
<div class="row items-center pointer">
<img src="../../assets/img/home-search.png" width="21" height="21"
@click="search"/>
</div>
</template>
</el-input>
<el-button type="primary" size="default" style="color: #ffff;" @click="addFont">
新增字体
</el-button>
</div>
<el-table v-loading="loading" ref="dataTableRef" highlight-current-row
v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
<el-table-column label="字体名称" width="240">
<template #default="scope">
<span :style="{'font-family':scope.row.reduceName}">{{scope.row.label}}</span>
</template>
</el-table-column>
<el-table-column label="font-family" width="190">
<template #default="scope">
{{scope.row.fontFamily}}
</template>
</el-table-column>
<el-table-column label="url">
<template #default="scope">
{{scope.row.fontUrl}}
</template>
</el-table-column>
const vipTheme = VIP_USER_THEME
const enTheme = ENT_USER_THEME
const dataList = ref([] as Array < any > );
const RawDataList = ref([] as Array < any > );
const loading = ref(false as any)
const deleteLoading = ref<any>(null)
const queryObj = reactive({
pageIndex: 1,
pageCount: 0,
keyWords: ''
})
const dataTableRef = ref()
const datas = reactive({
requestLoading: false,
addEditVisible: false,
params: {
id: 0,
fontFamily: '',
label: '',
fontUrl: '',
reduceName: '',
reduceUrl: '',
}
})
<el-table-column label="裁剪URL">
<template #default="scope">
{{scope.row.reduceUrl}}
</template>
</el-table-column>
<el-table-column label="操作" width="130">
<template #default="scope">
<el-button type="default" link :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
<el-button type="default" link :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 编辑字体 -->
<el-dialog v-model="datas.addEditVisible" :align-center="true" :show-close="true" :close-on-press-escape="false"
:close-on-click-modal="false" style="width: 573px;" class="small-padding" @close="close">
<template #header>
<div class="text-title text-center fz16 PingFangSC">{{datas.params.id?'编辑':'新增'}}字体</div>
</template>
<div class="addTemplateBox q-mb-lg fz14">
<div class="row flex-end q-mb-lg">
<el-button type="primary" size="small" style="color: #ffff;">
<el-upload
ref="upload"
:on-change="(uploadFile:any, uploadFiles:any)=> uploadFontHandler(uploadFile, uploadFiles,datas.params.fontFamily)"
action=""
:limit="1"
:auto-upload="false"
accept=".ttf, .woff, otf"
:show-file-list="false"
:on-exceed="handleExceed"
>
<template #trigger>
<span class="text-white">{{datas.params.id?'替换':'上传'}}字体</span>
</template>
</el-upload>
</el-button>
</div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">名称：</span>
<el-input min="750" v-model="datas.params.label"
placeholder="请输入字体名称" class=""></el-input>
<span class="q-px-md shrink">fontFamily：</span>
<el-input min="750" v-model="datas.params.fontFamily"
placeholder="请输入fontFamily" class=""></el-input>
</div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">URL：</span>
<el-input min="750" type="textarea" v-model="datas.params.fontUrl"
placeholder="请输入URL" class=""></el-input>
</div>
<div class="addTemplateInput q-mt-xs row items-center">
<span class="q-pr-md shrink">裁剪URL：</span>
<el-input min="750" type="textarea" v-model="datas.params.reduceUrl"
placeholder="请输入裁剪字体URL" class=""></el-input>
</div>
</div>
<div class="text-center">
<el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation"
:loading="requestLoading">
确认{{datas.params.id?'编辑':'新增'}}
</el-button>
</div>
</el-dialog>
</template>
const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>()
const uploadingIndex = ref(-1)
const upload = ref<UploadInstance>()
const fliesNum = ref(0 as number)
<script lang="ts" setup>
import { reactive, ref, inject, onMounted, watch} from "vue";
import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
import { useUserStore, useFontStore } from "@/store";
import { storeToRefs } from "pinia";
import { USER_DEFAULT_HEADER } from '@/configs/customer'
import { Edit,Delete } from '@element-plus/icons-vue';
import { ElLoading, ElMessage, ElMessageBox, UploadInstance } from 'element-plus'
import { CustomerFonts } from '@/store/font'
import {getFonts} from '@/utils/psdParser/index'
import FontService from '@/services/FontService'
import AliyunUpload from '@/utils/upload/aliyun'
import { reduceFont } from '@/utils/fonts/convertFont'
import FileService from '@/services/FileService'
const useUser = useUserStore()
const { userInfo } = storeToRefs(useUser)
const { formatFonts } = storeToRefs(useFontStore())
const userTheme = useUser.getUserTheme
const close = () => {
datas.params = {
id: 0,
fontFamily: '',
label: '',
fontUrl: '',
reduceName: '',
reduceUrl: '',
}
const vipTheme = VIP_USER_THEME
const enTheme = ENT_USER_THEME
const dataList = ref([] as Array < any > );
const RawDataList = ref([] as Array < any > );
const loading = ref(false as any)
const deleteLoading = ref<any>(null)
const queryObj = reactive({
pageIndex: 1,
pageCount: 0,
keyWords: ''
})
const dataTableRef = ref()
const datas = reactive({
requestLoading: false,
addEditVisible: false,
params: {
id: 0,
fontFamily: '',
label: '',
fontUrl: '',
reduceName: '',
reduceUrl: '',
}
})
const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>()
const uploadingIndex = ref(-1)
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
upload.value!.handleStart(file)
upload.value.submit()
const close = () => {
datas.params = {
id: 0,
fontFamily: '',
label: '',
fontUrl: '',
reduceName: '',
reduceUrl: '',
}
}
const ConfirmCreation = async (type:any) => {
//添加、编辑字体
if(!datas.params.label)return ElMessage({
message:'请输入名称',
type:'error'
})
if(!datas.params.fontFamily)return ElMessage({
message:'请输入fontFamily',
type:'error'
})
if(!datas.params.fontUrl)return ElMessage({
message:'请输入URL',
type:'error'
})
if(!datas.params.reduceUrl)return ElMessage({
message:'请输入裁剪URL',
type:'error'
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
upload.value!.handleStart(file)
upload.value.submit()
}
const ConfirmCreation = async () => {
//添加、编辑字体
if(!datas.params.label)return ElMessage({
message:'请输入名称',
type:'error'
})
if(!datas.params.fontFamily)return ElMessage({
message:'请输入fontFamily',
type:'error'
})
if(!datas.params.fontUrl)return ElMessage({
message:'请输入URL',
type:'error'
})
if(!datas.params.reduceUrl)return ElMessage({
message:'请输入裁剪URL',
type:'error'
})
datas.requestLoading = true
const result = await useFontStore().uploadFontAsync(datas.params)
if(result){
ElMessage({
showClose: true,
message: `操作${datas.params.label}成功`,
type: 'success',
})
datas.requestLoading = true
const result = await useFontStore().uploadFontAsync(datas.params)
if(result){
datas.addEditVisible = false
datas.requestLoading = false
querySearchHandler()
}else{
ElMessage({
showClose: true,
message: `操作${datas.params.label}成功`,
type: 'success',
message:'字体上传失败,请重试',
type:'error'
})
if(fliesNum.value) fliesNum.value--
if(!type||(type&&!fliesNum.value)) datas.addEditVisible = false
console.log(fliesNum.value,'----4')
datas.requestLoading = false
querySearchHandler()
}else{
ElMessage({
message:'字体上传失败,请重试',
type:'error'
})
if(fliesNum.value) fliesNum.value--
console.log(fliesNum.value,'----5')
datas.requestLoading = false
}
}
const addFont = () => {
}
const addFont = () => {
datas.addEditVisible = true
}
const editDelete = (item: Object,index: Number) => {
if(index>=0){
deleteFont(index,item)
}else{
datas.params = JSON.parse(JSON.stringify(item))
datas.addEditVisible = true
}
const editDelete = (item: Object,index: Number) => {
if(index>=0){
deleteFont(index,item)
}else{
datas.params = JSON.parse(JSON.stringify(item))
datas.addEditVisible = true
}
}
const deleteFont = (index: Number, item: Object) => {
ElMessageBox.confirm(
`此操作将删除 ${item.label} 字体，是否确定?`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(async () => {
try {
deleteLoading.value = ElLoading.service({
lock:true,
text:'正在处理'
})
let dataRes = await FontService.RemoveTripFile(item.id)
if (dataRes.data.resultCode == 1) {
ElMessage({
showClose: true,
message: `删除${item.label}成功`,
type: 'success',
})
search()
}else {
ElMessage({
showClose: true,
message: `删除${item.label}失败`,
type: 'warning',
})
}
} catch (error) {}
deleteLoading.value.close()
deleteLoading.value = null
}).catch(() => {
}
const deleteFont = (index: Number, item: Object) => {
ElMessageBox.confirm(
`此操作将删除 ${item.label} 字体，是否确定?`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(async () => {
try {
deleteLoading.value = ElLoading.service({
lock:true,
text:'正在处理'
})
let dataRes = await FontService.RemoveTripFile(item.id)
if (dataRes.data.resultCode == 1) {
ElMessage({
showClose: true,
message: `删除${item.label}成功`,
type: 'success',
})
search()
}else {
ElMessage({
showClose: true,
message: `删除${item.label}失败`,
type: 'warning',
})
}
} catch (error) {}
deleteLoading.value.close()
deleteLoading.value = null
})
}
const uploadFontHandler = async (uploadFile:any, uploadFiles:any, fontName:string) => {
fliesNum.value = uploadFiles.length
console.log(fliesNum.value,'----0')
const ns = uploadFile.name.toLowerCase().split('.')
const n = ns[ns.length-1]
const acceptFile = ['ttf','otf','woff']
if(acceptFile.indexOf(n)==-1){
ElMessage.error({
message:`不支持此类文件上传，目前只支持${acceptFile.join(',')}等文件上传`
})
if(fliesNum.value) fliesNum.value--
console.log(fliesNum.value,'----01')
return;
}
uploadingIndex.value = dataList.value?.findIndex(x=>x.fontFamily==fontName)??-1
try {
let info:any = null
try {
info = await reduceFont(uploadFile?.raw)
} catch (error) {
ElMessage.error({message:'字体无法识别，请更换'})
uploadingIndex.value=-1
if(fliesNum.value) fliesNum.value--
console.log(fliesNum.value,'----1')
return
}
const flagIndex = dataList.value.findIndex(x=>x.label==info.name)
if(flagIndex>0){
ElMessage.error({message:`${info.name} 字体已存在，请选择使用已有字体`})
uploadingIndex.value=-1
if(fliesNum.value) fliesNum.value--
console.log(fliesNum.value,'----2')
return
}
let url = await FileService.uploadToFontServerAsync(uploadFile?.raw)
if(url && url!=''){
if(url.indexOf('"')!=-1) url = url.replaceAll('"','')
let label=uploadFile.name.split('.')[0],reduceName='',reduceUrl=''
try {
if(info.file){
label = info.name
reduceName = `${fontName}_reduce`
reduceUrl = await AliyunUpload.UploadAsync(info.file,"tripfont/"+info.file.name)
}
} catch (error) {
}
datas.params.label = label
datas.params.fontFamily = fontName
datas.params.fontUrl = url
datas.params.reduceName = reduceName
datas.params.reduceUrl = reduceUrl
await ConfirmCreation(1)
}else{
ElMessage({
message:'上传失败，请重试',
type:'error'
})
if(fliesNum.value) fliesNum.value--
console.log(fliesNum.value,'----3')
}
} catch (error) {
}
}
const tableScrollHandler = ()=>{
if(queryObj.pageCount>queryObj.pageIndex){
queryObj.value.pageIndex++
refreshHandler()
}
}
const search = () => {
queryObj.pageIndex = 1
querySearchHandler()
}
const querySearchHandler = async () => {
loading.value = true
try {
let pageRes = await FontService.GetManagerFontList(queryObj);
if (pageRes.data.resultCode == 1) {
dataList.value = pageRes.data.data
RawDataList.value = pageRes.data.data
}
loading.value = false
} catch (error) {
loading.value = false
}
}
querySearchHandler()
</script>
<style scoped>
.addTemplateInput span {
width: 95px;
text-align: right;
}
.user-header {
padding: 16px 24px;
position: relative;
font-size: 14px;
color:#FFF;
z-index: 1;
width:100%;
overflow: hidden;
}
}).catch(() => {
deleteLoading.value.close()
deleteLoading.value = null
})
.user-header::after {
position: absolute;
top: 0;
right: -48px;
bottom: -12px;
z-index: -1;
width: 100%;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
content: "";
transform: scale(2);
transform-origin: right center;
}
const uploadFontHandler = async (uploadFile:any, uploadFiles:any, fontName:string) => {
const ns = uploadFile.name.toLowerCase().split('.')
const n = ns[ns.length-1]
const acceptFile = ['ttf','otf','woff']
if(acceptFile.indexOf(n)==-1){
ElMessage.error({
message:`不支持此类文件上传，目前只支持${acceptFile.join(',')}等文件上传`
})
return;
}
.user-label{
font-size: 12px;
margin-bottom: 8px;
uploadingIndex.value = dataList.value?.findIndex(x=>x.fontFamily==fontName)??-1
try {
let info:any = null
try {
info = await reduceFont(uploadFile?.raw)
} catch (error) {
ElMessage.error({message:'字体无法识别，请更换'})
uploadingIndex.value=-1
return
}
const flagIndex = dataList.value.findIndex(x=>x.label==info.name)
if(flagIndex>0){
ElMessage.error({message:`${info.name} 字体已存在，请选择使用已有字体`})
uploadingIndex.value=-1
return
}
let url = await FileService.uploadToFontServerAsync(uploadFile?.raw)
if(url && url!=''){
if(url.indexOf('"')!=-1) url = url.replaceAll('"','')
let label=uploadFile.name.split('.')[0],reduceName='',reduceUrl=''
try {
if(info.file){
label = info.name
reduceName = `${fontName}_reduce`
reduceUrl = await AliyunUpload.UploadAsync(info.file,"tripfont/"+info.file.name)
}
} catch (error) {
}
datas.params.label = label
datas.params.fontFamily = fontName
datas.params.fontUrl = url
datas.params.reduceName = reduceName
datas.params.reduceUrl = reduceUrl
await ConfirmCreation()
}else{
ElMessage({
message:'上传失败，请重试',
type:'error'
})
}
} catch (error) {
}
.user-card {
width: 33%;
min-height: 112px;
}
const tableScrollHandler = ()=>{
if(queryObj.pageCount>queryObj.pageIndex){
queryObj.value.pageIndex++
refreshHandler()
}
.user-card .title,
.enter-card .title{
font-size: 15px;
font-weight: bold;
color: #000;
}
const search = () => {
queryObj.pageIndex = 1
querySearchHandler()
}
const querySearchHandler = async () => {
loading.value = true
try {
let pageRes = await FontService.GetManagerFontList(queryObj);
if (pageRes.data.resultCode == 1) {
dataList.value = pageRes.data.data
RawDataList.value = pageRes.data.data
}
loading.value = false
} catch (error) {
loading.value = false
}
</style>
\ No newline at end of file
}
querySearchHandler()
</script>
<style scoped>
.addTemplateInput span {
width: 95px;
text-align: right;
}
.user-header {
padding: 16px 24px;
position: relative;
font-size: 14px;
color:#FFF;
z-index: 1;
width:100%;
overflow: hidden;
}
.user-header::after {
position: absolute;
top: 0;
right: -48px;
bottom: -12px;
z-index: -1;
width: 100%;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
content: "";
transform: scale(2);
transform-origin: right center;
}
.user-label{
font-size: 12px;
margin-bottom: 8px;
}
.user-card {
width: 33%;
min-height: 112px;
}
.user-card .title,
.enter-card .title{
font-size: 15px;
font-weight: bold;
color: #000;
}
</style>
\ No newline at end of file
src/views/components/element/ImageElement/index.vue
View file @ 7bead4a4
......@@ -112,7 +112,7 @@ const { filter } = useFilter(filters)
const { imgReplaceVisible } = storeToRefs(useScreenStore())
const openDataReplace = () => {
imgReplaceVisible.value = true
if(!props.elementInfo.lock) imgReplaceVisible.value = true
}
const handleSelectElement = (e: MouseEvent | TouchEvent) => {
......
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