完成作品墙+完善应用服务管理+完善图片管理
This commit is contained in:
parent
939afe16ec
commit
199f536666
@ -9,6 +9,7 @@ import { baseUrlHost } from '../baseUrlHost';
|
|||||||
* @method getAttachmentList 分页查询附件
|
* @method getAttachmentList 分页查询附件
|
||||||
* @method getAttachmentDetail 查看单个附件
|
* @method getAttachmentDetail 查看单个附件
|
||||||
* @method downloadFiles 批量文件下载
|
* @method downloadFiles 批量文件下载
|
||||||
|
* @method uploadByType 公开附件上传
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function attachmentApi() {
|
export function attachmentApi() {
|
||||||
@ -32,6 +33,14 @@ export function attachmentApi() {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
responseType: 'blob',
|
responseType: 'blob',
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
uploadByType: (data: object) => {
|
||||||
|
return request({
|
||||||
|
url: baseUrlHost + '/enAttachment/uploadByType',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,6 +14,7 @@ import { baseUrlHost } from '../baseUrlHost';
|
|||||||
* @method updatePhotos 更新图片
|
* @method updatePhotos 更新图片
|
||||||
* @method deletePhotos 删除图片
|
* @method deletePhotos 删除图片
|
||||||
* @method uploadFile 上传图片
|
* @method uploadFile 上传图片
|
||||||
|
* @method uploadPictrue 公开图片上传，返回图片id
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function photosApi() {
|
export function photosApi() {
|
||||||
@ -70,6 +71,14 @@ export function photosApi() {
|
|||||||
data,
|
data,
|
||||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
|
uploadPictrue:(data: object) => {
|
||||||
|
return request({
|
||||||
|
url: baseUrlHost + '/cpPhoto/uploadPictrue',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
||||||
|
})
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,6 +9,7 @@ import { pixelUrlHost } from '/@/api/baseUrlHost';
|
|||||||
* @method getRecommendList 获取推荐作品列表
|
* @method getRecommendList 获取推荐作品列表
|
||||||
* @method saveRecommend 保存推荐作品
|
* @method saveRecommend 保存推荐作品
|
||||||
* @method deleteRecommend 删除推荐作品
|
* @method deleteRecommend 删除推荐作品
|
||||||
|
* @method updateRecommend 修改推荐作品
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function recommendApi() {
|
export function recommendApi() {
|
||||||
@ -32,6 +33,13 @@ export function recommendApi() {
|
|||||||
url: pixelUrlHost + `/paRecommend/${id}`,
|
url: pixelUrlHost + `/paRecommend/${id}`,
|
||||||
method: 'delete',
|
method: 'delete',
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
|
updateRecommend: (data: object) => {
|
||||||
|
return request({
|
||||||
|
url: pixelUrlHost + '/paRecommend',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
52
src/api/service/wall/index.ts
Normal file
52
src/api/service/wall/index.ts
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import request from '/@/utils/request';
|
||||||
|
import { pixelUrlHost } from '/@/api/baseUrlHost';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
|
||||||
|
* 注意在写get请求时，参数是params，而不是data，要标注好
|
||||||
|
*
|
||||||
|
* 登录api接口集合
|
||||||
|
* @method getWallList 获取作品墙列表
|
||||||
|
* @method saveWall 保存作品墙推荐作品
|
||||||
|
* @method deleteWall 删除作品墙推荐作品
|
||||||
|
* @method updateWall 修改作品墙推荐作品
|
||||||
|
* @method singleWall 获取作品墙作品详情
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function recommendWallApi() {
|
||||||
|
return {
|
||||||
|
getWallList: (params: object) => {
|
||||||
|
return request({
|
||||||
|
url: pixelUrlHost + '/paPictureWall',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveWall: (data: object) => {
|
||||||
|
return request({
|
||||||
|
url: pixelUrlHost + '/paPictureWall',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deleteWall: (id: Number) => {
|
||||||
|
return request({
|
||||||
|
url: pixelUrlHost + `/paPictureWall/${id}`,
|
||||||
|
method: 'delete',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
updateWall: (data: object) => {
|
||||||
|
return request({
|
||||||
|
url: pixelUrlHost + '/paPictureWall',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
singleWall: (id: Number) => {
|
||||||
|
return request({
|
||||||
|
url: pixelUrlHost + `/paPictureWall/${id}`,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -108,6 +108,7 @@ export default {
|
|||||||
apply: 'apply',
|
apply: 'apply',
|
||||||
shares: 'shares',
|
shares: 'shares',
|
||||||
recommend: 'recommend',
|
recommend: 'recommend',
|
||||||
|
recommendWall: 'recommendWall',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 业务模块end
|
* 业务模块end
|
||||||
|
|||||||
@ -111,6 +111,7 @@ export default {
|
|||||||
apply: '应用管理',
|
apply: '应用管理',
|
||||||
shares: '发布管理',
|
shares: '发布管理',
|
||||||
recommend: '推荐管理',
|
recommend: '推荐管理',
|
||||||
|
recommendWall: '作品墙',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 业务模块end
|
* 业务模块end
|
||||||
|
|||||||
@ -108,6 +108,7 @@ export default {
|
|||||||
apply: '應用管理',
|
apply: '應用管理',
|
||||||
shares: '發佈管理',
|
shares: '發佈管理',
|
||||||
recommend: '推薦管理',
|
recommend: '推薦管理',
|
||||||
|
recommendWall: '作品墻',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 业务模块end
|
* 业务模块end
|
||||||
|
|||||||
@ -306,6 +306,23 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
|||||||
icon: 'ele-Upload',
|
icon: 'ele-Upload',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// 推荐管理
|
||||||
|
{
|
||||||
|
path: '/recommendWall',
|
||||||
|
name: 'recommendWall',
|
||||||
|
component: () => import('/@/views/service/wall/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: 'message.router.recommendWall',
|
||||||
|
isLink: '',
|
||||||
|
isHide: false,
|
||||||
|
isKeepAlive: true,
|
||||||
|
isAffix: false,
|
||||||
|
isIframe: false,
|
||||||
|
roles: ['admin', 'user'],
|
||||||
|
icon: 'ele-Upload',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 业务模块end
|
* 业务模块end
|
||||||
|
|||||||
@ -190,7 +190,7 @@ const toEditArticle = (row: any) => {
|
|||||||
const copyLink = (row: any) => {
|
const copyLink = (row: any) => {
|
||||||
if(row.id == null||row.id == ''){ ElMessage.warning('链接为空');return;}
|
if(row.id == null||row.id == ''){ ElMessage.warning('链接为空');return;}
|
||||||
var aux = document.createElement("input");
|
var aux = document.createElement("input");
|
||||||
aux.setAttribute("value", `${viteUrl}vueAdmin/#article/content?id=${row.id}`);
|
aux.setAttribute("value", `${viteUrl}pixelAdmin/#article/content?id=${row.id}`);
|
||||||
document.body.appendChild(aux);
|
document.body.appendChild(aux);
|
||||||
aux.select();
|
aux.select();
|
||||||
document.execCommand("copy");
|
document.execCommand("copy");
|
||||||
@ -206,7 +206,7 @@ const toShowDetail = (row: any) => {
|
|||||||
|
|
||||||
// 预览
|
// 预览
|
||||||
const toPreview = (row: any) => {
|
const toPreview = (row: any) => {
|
||||||
window.open(`${viteUrl}vueAdmin/#article/content?id=${row.id}`);
|
window.open(`${viteUrl}pixelAdmin/#article/content?id=${row.id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 文章删除
|
// 文章删除
|
||||||
|
|||||||
@ -328,7 +328,7 @@ const jpgFormatter = (row: any) => {
|
|||||||
// } else {
|
// } else {
|
||||||
// newPath = row.path.replaceAll('\\\\', '/')
|
// newPath = row.path.replaceAll('\\\\', '/')
|
||||||
// }
|
// }
|
||||||
newPath = newPath.includes('://')?newPath : encodeURI(newPath);
|
newPath = newPath.includes('://')?newPath : newPath;
|
||||||
|
|
||||||
return `${newPath}`;
|
return `${newPath}`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -337,6 +337,7 @@ onMounted(() => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
.cir-one{
|
.cir-one{
|
||||||
|
line-height: 1.3em;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: rgba($color: #000000, $alpha: 0.8);
|
color: rgba($color: #000000, $alpha: 0.8);
|
||||||
|
|||||||
@ -43,11 +43,12 @@
|
|||||||
preview-teleported="true" :preview-src-list="[getImagePath(scope.row.path)]"/>
|
preview-teleported="true" :preview-src-list="[getImagePath(scope.row.path)]"/>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="serviceName" align="center" label="服务名" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="serviceName" align="center" label="作品类型" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column prop="createtime" align="center" label="时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="createtime" align="center" label="时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column label="操作" width="200" align="center">
|
<el-table-column label="操作" width="200" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<!-- <el-button size="small" text type="primary" @click="toShowDetail(scope.row.id)">查看详情</el-button> -->
|
<!-- <el-button size="small" text type="primary" @click="toShowDetail(scope.row.id)">查看详情</el-button> -->
|
||||||
|
<el-button size="small" text type="primary" @click="reviewRecommend(scope.row)">修改</el-button>
|
||||||
<el-button size="small" text type="danger" @click="deleteRecommend(scope.row.id)">删除</el-button>
|
<el-button size="small" text type="danger" @click="deleteRecommend(scope.row.id)">删除</el-button>
|
||||||
<!-- <el-button size="small" v-else text type="primary" @click="audit(scope.row)">重新审核</el-button> -->
|
<!-- <el-button size="small" v-else text type="primary" @click="audit(scope.row)">重新审核</el-button> -->
|
||||||
</template>
|
</template>
|
||||||
@ -93,6 +94,59 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||||
|
<el-form-item label="排序号：" prop="number">
|
||||||
|
<el-input placeholder="请输入排序号" min="0" v-model="state.recommend.form.number" type="number"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||||
|
<el-form-item label="原图：" class="iconImg">
|
||||||
|
<!-- 上传文件 -->
|
||||||
|
<el-upload ref="ordUploadRef" class="h100 personal-user-left-upload" action="#" list-type="picture-card"
|
||||||
|
:auto-upload="false" :limit="1" :class="{ hide: state.recommend.picture.ordHide }" @change="handleOrdUploadChange" accept='image/*'>
|
||||||
|
<template #default>
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #file="{ file }">
|
||||||
|
<div>
|
||||||
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||||
|
<span class="el-upload-list__item-actions">
|
||||||
|
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||||||
|
<el-icon><zoom-in /></el-icon>
|
||||||
|
</span>
|
||||||
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleOrdRemove(file)">
|
||||||
|
<el-icon><Delete /></el-icon>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||||
|
<el-form-item label="效果图：" class="iconImg">
|
||||||
|
<!-- 上传文件 -->
|
||||||
|
<el-upload ref="effUploadRef" class="h100 personal-user-left-upload" action="#" list-type="picture-card"
|
||||||
|
:auto-upload="false" :limit="1" :class="{ hide: state.recommend.picture.effHide }" @change="handleEffUploadChange" accept='image/*'>
|
||||||
|
<template #default>
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #file="{ file }">
|
||||||
|
<div>
|
||||||
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||||
|
<span class="el-upload-list__item-actions">
|
||||||
|
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||||||
|
<el-icon><zoom-in /></el-icon>
|
||||||
|
</span>
|
||||||
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleEffRemove(file)">
|
||||||
|
<el-icon><Delete /></el-icon>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
@ -113,7 +167,9 @@
|
|||||||
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
|
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
|
||||||
import { recommendApi } from '/@/api/service/recommend';
|
import { recommendApi } from '/@/api/service/recommend';
|
||||||
import { applyApi } from '/@/api/service/apply';
|
import { applyApi } from '/@/api/service/apply';
|
||||||
import { ElMessage, ElMessageBox, TableColumnCtx, UploadFile } from 'element-plus';
|
import { photosApi } from '/@/api/photos';
|
||||||
|
import { ElMessage, ElMessageBox, TableColumnCtx, UploadFile, UploadFiles } from 'element-plus';
|
||||||
|
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
// 表格数据
|
// 表格数据
|
||||||
const state = reactive<any>({
|
const state = reactive<any>({
|
||||||
@ -124,7 +180,9 @@ const state = reactive<any>({
|
|||||||
param: {
|
param: {
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
serviceName: ''
|
serviceName: '',
|
||||||
|
isBackend: 1,
|
||||||
|
number: ''
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
special: {
|
special: {
|
||||||
@ -144,19 +202,25 @@ const state = reactive<any>({
|
|||||||
form: {},
|
form: {},
|
||||||
rules: {
|
rules: {
|
||||||
// photoSourceId: { required: true, message: '请输入应用名称', trigger: 'blur' },
|
// photoSourceId: { required: true, message: '请输入应用名称', trigger: 'blur' },
|
||||||
photoTargetId: { required: true, message: '请上传推荐作品', trigger: 'blur' },
|
photoTargetId: { required: false, message: '请上传推荐作品', trigger: 'blur' },
|
||||||
serviceName: { required: true, message: '请选择作品类型', trigger: 'blur' },
|
serviceName: { required: true, message: '请选择作品类型', trigger: 'blur' },
|
||||||
|
number: { required: true, message: '请输入排序号', trigger: 'blur' }
|
||||||
},
|
},
|
||||||
show: false,
|
show: false,
|
||||||
title: '新增推荐作品',
|
title: '新增推荐作品',
|
||||||
coverFile: {},
|
picture:{
|
||||||
coverHide: false
|
ordFile: {},
|
||||||
|
ordHide: false,
|
||||||
|
effFile: {},
|
||||||
|
effHide: false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 引入 api 请求接口
|
// 引入 api 请求接口
|
||||||
const redApi = recommendApi();
|
const redApi = recommendApi();
|
||||||
const aplApi = applyApi();
|
const aplApi = applyApi();
|
||||||
|
const photoApi = photosApi();
|
||||||
|
|
||||||
// 图标弹窗
|
// 图标弹窗
|
||||||
const dialogImageUrl = ref('');
|
const dialogImageUrl = ref('');
|
||||||
@ -164,6 +228,11 @@ const dialogVisible = ref(false);
|
|||||||
|
|
||||||
// 定义变量内容
|
// 定义变量内容
|
||||||
const recommendFormRef = ref();
|
const recommendFormRef = ref();
|
||||||
|
const ordUploadRef = ref();
|
||||||
|
const effUploadRef = ref();
|
||||||
|
|
||||||
|
// 图标上传禁用
|
||||||
|
const disabled = ref(false);
|
||||||
|
|
||||||
// 获取专题列表
|
// 获取专题列表
|
||||||
const getSpecialList = async() => {
|
const getSpecialList = async() => {
|
||||||
@ -206,6 +275,26 @@ const getTableData = async() => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 修改排序号
|
||||||
|
const reviewRecommend = (row:any) => {
|
||||||
|
ElMessageBox.prompt('排序号','编辑',{
|
||||||
|
inputValue: `${row.number}`,
|
||||||
|
inputPattern:/^(0|[1-9][0-9]*)$/,
|
||||||
|
inputErrorMessage: '请输入大于等于0的数字',
|
||||||
|
inputPlaceholder: '请输入排序号'
|
||||||
|
}).then(async({ value }) => {
|
||||||
|
let res = await redApi.updateRecommend({id: row.id,number: Number(value)});
|
||||||
|
if(res?.success){
|
||||||
|
// getTableData();
|
||||||
|
row.number = Number(value);
|
||||||
|
ElMessage.success('修改成功！');
|
||||||
|
}else{
|
||||||
|
ElMessage.error('修改失败！');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
// 删除推荐
|
// 删除推荐
|
||||||
const deleteRecommend = (id:Number) =>{
|
const deleteRecommend = (id:Number) =>{
|
||||||
ElMessageBox.confirm('是否确定删除该推荐?', '提示', {
|
ElMessageBox.confirm('是否确定删除该推荐?', '提示', {
|
||||||
@ -234,7 +323,8 @@ const reset = () =>{
|
|||||||
state.tableData.param = {
|
state.tableData.param = {
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
serviceName: ''
|
serviceName: '',
|
||||||
|
isBackend: 1
|
||||||
}
|
}
|
||||||
getTableData();
|
getTableData();
|
||||||
}
|
}
|
||||||
@ -244,7 +334,8 @@ const closeDialog = () => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
state.recommend.show = false;
|
state.recommend.show = false;
|
||||||
state.recommend.form = {};
|
state.recommend.form = {};
|
||||||
handleRemove();
|
handleOrdRemove();
|
||||||
|
handleEffRemove();
|
||||||
}, 300)
|
}, 300)
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -253,11 +344,67 @@ const onCancel = () => {
|
|||||||
closeDialog();
|
closeDialog();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 图标删除
|
// 上传文件
|
||||||
const handleRemove = (file?: UploadFile) => {
|
const uploadImageFile = async(file: any,type: any) => {
|
||||||
state.recommend.coverFile = {};
|
try {
|
||||||
// uploadRef.value.clearFiles();
|
state.recommend.loading = true;
|
||||||
state.recommend.coverHide = false;
|
const formdata = new FormData();
|
||||||
|
formdata.append('file', file);
|
||||||
|
let res = await photoApi.uploadPictrue(formdata);
|
||||||
|
if(res?.success){
|
||||||
|
type === 'ord' ? state.recommend.form.photoSourceId = res.data.id : state.recommend.form.photoTargetId = res.data.id ;
|
||||||
|
state.recommend.loading = false;
|
||||||
|
}else{
|
||||||
|
ElMessage.error('图片上传失败！');
|
||||||
|
state.recommend.loading = false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
state.recommend.loading = false;
|
||||||
|
ElMessage.error('图片上传失败！');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 图标删除——原图
|
||||||
|
const handleOrdRemove = (file?: UploadFile) => {
|
||||||
|
state.recommend.picture.ordFile = {};
|
||||||
|
state.recommend.form.photoSourceId = '';
|
||||||
|
ordUploadRef.value.clearFiles();
|
||||||
|
state.recommend.picture.ordHide = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标删除——效果图
|
||||||
|
const handleEffRemove = (file?: UploadFile) => {
|
||||||
|
state.recommend.picture.effFile = {};
|
||||||
|
state.recommend.form.photoTargetId = '';
|
||||||
|
effUploadRef.value.clearFiles();
|
||||||
|
state.recommend.picture.effHide = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标图片更改——原图
|
||||||
|
const handleOrdUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
||||||
|
if(uploadFile.raw.type.includes('image')){
|
||||||
|
const file:any = uploadFile.raw;
|
||||||
|
state.recommend.picture.ordFile = file;
|
||||||
|
state.recommend.picture.ordHide = true;
|
||||||
|
uploadImageFile(file,'ord');
|
||||||
|
}else{
|
||||||
|
ElMessage.error('请上传图片文件！');
|
||||||
|
ordUploadRef.value.clearFiles();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标图片更改——效果图
|
||||||
|
const handleEffUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
||||||
|
if(uploadFile.raw.type.includes('image')){
|
||||||
|
const file:any = uploadFile.raw;
|
||||||
|
state.recommend.picture.effFile = file;
|
||||||
|
state.recommend.picture.effHide = true;
|
||||||
|
uploadImageFile(file,'eff');
|
||||||
|
}else{
|
||||||
|
ElMessage.error('请上传图片文件！');
|
||||||
|
effUploadRef.value.clearFiles();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 图标预览
|
// 图标预览
|
||||||
@ -271,7 +418,7 @@ const replayFormRef = ref();
|
|||||||
// 提交
|
// 提交
|
||||||
const onSubmit = () => {
|
const onSubmit = () => {
|
||||||
recommendFormRef.value.validate(async(valid: boolean) => {
|
recommendFormRef.value.validate(async(valid: boolean) => {
|
||||||
if (valid && state.coverHide){
|
if (valid && state.recommend.picture.effHide){
|
||||||
try {
|
try {
|
||||||
state.recommend.loading = true;
|
state.recommend.loading = true;
|
||||||
let res = await redApi.saveRecommend(state.recommend.form);
|
let res = await redApi.saveRecommend(state.recommend.form);
|
||||||
@ -289,7 +436,8 @@ const onSubmit = () => {
|
|||||||
state.recommend.loading = false;
|
state.recommend.loading = false;
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
ElMessage.error('请完善信息！');
|
ElMessage.error(state.recommend.form.number ? '请上传效果图！' :
|
||||||
|
(state.recommend.form.serviceName ? '请输入排序号！' : '请选择作品类型！'));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
645
src/views/service/wall/index.vue
Normal file
645
src/views/service/wall/index.vue
Normal file
@ -0,0 +1,645 @@
|
|||||||
|
<template>
|
||||||
|
<div class="system-dept-container layout-padding">
|
||||||
|
<el-card shadow="hover" class="layout-padding-auto">
|
||||||
|
<div class="system-dept-search mb15">
|
||||||
|
<span>标签:</span>
|
||||||
|
<el-select size="default" v-model="state.tableData.param.labelName" placeholder="请选择" filterable clearable class="ml10" style="max-width: 180px;margin:0 10px;">
|
||||||
|
<el-option v-for="(item,index) in labelList" :key="index" :label="item.name" :value="item.name" />
|
||||||
|
</el-select>
|
||||||
|
<span>应用服务:</span>
|
||||||
|
<el-select size="default" v-model="state.tableData.param.serviceName" placeholder="请选择" filterable clearable class="ml10" style="max-width: 180px;margin:0 10px;">
|
||||||
|
<el-option v-for="(item,index) in state.special.data" :key="index" :label="item.name" :value="item.name" />
|
||||||
|
</el-select>
|
||||||
|
<el-button @click="getTableData" size="default" type="primary" class="ml10" style="margin-right: 15px;">
|
||||||
|
<el-icon>
|
||||||
|
<ele-Search />
|
||||||
|
</el-icon>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="reset" size="default" type="primary" class="ml10" style="margin-right: 15px;">
|
||||||
|
<el-icon>
|
||||||
|
<ele-RefreshRight />
|
||||||
|
</el-icon>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="switchDrawer(0)" size="default" type="primary" class="ml10">
|
||||||
|
<el-icon>
|
||||||
|
<ele-FolderAdd />
|
||||||
|
</el-icon>
|
||||||
|
添加图片
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" class="custom-table">
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column prop="name" label="图片名称" :formatter="commonFormatter" show-overflow-tooltip width="150px"></el-table-column>
|
||||||
|
<el-table-column label="水印图" width="150px" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-image lazy :src="jpgFormatter(scope.row.watermarkPath)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row.watermarkPath)]"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="原图" width="150px" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-image lazy :src="jpgFormatter(scope.row.originalPath)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row.originalPath)]"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="serviceName" label="应用服务" show-overflow-tooltip align="center"></el-table-column>
|
||||||
|
<el-table-column prop="number" label="排序" :formatter="commonFormatter" show-overflow-tooltip align="center"></el-table-column>
|
||||||
|
<el-table-column prop="price" label="价格" show-overflow-tooltip align="center"></el-table-column>
|
||||||
|
<el-table-column prop="uploadName" label="上传者" :formatter="commonFormatter" show-overflow-tooltip align="center"></el-table-column>
|
||||||
|
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="250" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button text type="primary" @click="switchDrawer(1,scope.row.id)">
|
||||||
|
<el-icon>
|
||||||
|
<ele-Edit />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
<el-button text type="primary" @click="deleteBanner(scope.row.id)">
|
||||||
|
<el-icon>
|
||||||
|
<ele-Delete />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 新增或编辑弹窗 -->
|
||||||
|
<el-drawer
|
||||||
|
v-model="dialog"
|
||||||
|
:title="changeTitle()"
|
||||||
|
@close="resetForm"
|
||||||
|
direction="rtl"
|
||||||
|
size="45%"
|
||||||
|
>
|
||||||
|
<div class="demo-drawer__content">
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
style="max-width: 85%"
|
||||||
|
:model="state.formData"
|
||||||
|
:rules="state.rules"
|
||||||
|
label-width="110px"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
:size="formSize"
|
||||||
|
status-icon
|
||||||
|
v-loading="state.formData.loading"
|
||||||
|
:disabled="isForbidden"
|
||||||
|
>
|
||||||
|
<el-form-item label="标签:" prop="cpLabelId">
|
||||||
|
<el-select size="default" v-model="state.formData.cpLabelId" placeholder="请选择" clearable filterable>
|
||||||
|
<el-option
|
||||||
|
v-for="(item,index) in labelList"
|
||||||
|
:key="index"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="应用服务:" prop="serviceId">
|
||||||
|
<el-select size="default" v-model="state.formData.serviceId" placeholder="请选择服务类型"
|
||||||
|
clearable filterable>
|
||||||
|
<el-option v-for="(item,index) in state.special.data" :key="index" :label="item.name" :value="item.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图片名称:" prop="name" >
|
||||||
|
<el-input v-model="state.formData.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="水印图:" prop="fileList">
|
||||||
|
<el-upload ref="uploadRef" action="#" list-type="picture-card" :class="{disabled:uploadDisabled}"
|
||||||
|
:limit="1" :file-list="state.formData.fileList" :on-change="handleChange" :auto-upload="false">
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
<template #file="{ file }">
|
||||||
|
<div>
|
||||||
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||||
|
<span class="el-upload-list__item-actions">
|
||||||
|
<span
|
||||||
|
class="el-upload-list__item-preview"
|
||||||
|
@click="handlePictureCardPreview(file)"
|
||||||
|
>
|
||||||
|
<el-icon><zoom-in /></el-icon>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="!disabled"
|
||||||
|
class="el-upload-list__item-delete"
|
||||||
|
@click="handleRemove(file)"
|
||||||
|
>
|
||||||
|
<el-icon><Delete /></el-icon>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="原图:" prop="ordFileList">
|
||||||
|
<el-upload ref="ordUploadRef" action="#" list-type="picture-card" :class="{disabled:ordUploadDisabled}"
|
||||||
|
:limit="1" :file-list="state.formData.ordFileList" :on-change="handleOrdChange" :auto-upload="false">
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
<template #file="{ file }">
|
||||||
|
<div>
|
||||||
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||||
|
<span class="el-upload-list__item-actions">
|
||||||
|
<span
|
||||||
|
class="el-upload-list__item-preview"
|
||||||
|
@click="handlePictureCardPreview(file)"
|
||||||
|
>
|
||||||
|
<el-icon><zoom-in /></el-icon>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="!disabled"
|
||||||
|
class="el-upload-list__item-delete"
|
||||||
|
@click="handleOrdRemove(file)"
|
||||||
|
>
|
||||||
|
<el-icon><Delete /></el-icon>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序号：" prop="number">
|
||||||
|
<el-input placeholder="请输入排序号" min="0" v-model="state.formData.number" type="number"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="价格：" prop="price">
|
||||||
|
<el-input placeholder="请输入价格" min="0" v-model="state.formData.price" type="number"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-dialog v-model="dialogVisible">
|
||||||
|
<img :src="dialogImageUrl" style="width: 100%" alt="Preview Image" />
|
||||||
|
</el-dialog>
|
||||||
|
</el-form>
|
||||||
|
<div class="demo-drawer__footer">
|
||||||
|
<el-button v-show="isHide" @click="submitForm(flag)" :loading="loading" style="margin-right: 30px;" >
|
||||||
|
{{ loading ? '保存 ...' : '保存' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" @click="resetForm">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
<!-- 分页器 -->
|
||||||
|
<el-pagination
|
||||||
|
@size-change="onHandleSizeChange"
|
||||||
|
@current-change="onHandleCurrentChange"
|
||||||
|
class="mt15"
|
||||||
|
:pager-count="5"
|
||||||
|
:page-sizes="[10, 20, 30]"
|
||||||
|
v-model:current-page="state.tableData.param.current"
|
||||||
|
background
|
||||||
|
v-model:page-size="state.tableData.param.size"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="state.tableData.total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="recommendWall">
|
||||||
|
import { onMounted, reactive, ref } from 'vue';
|
||||||
|
import { ElDrawer, ElMessage, ElMessageBox, TableColumnCtx, timePickerDefaultProps } from 'element-plus';
|
||||||
|
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'
|
||||||
|
import type { ComponentSize, FormInstance, FormRules, UploadFile, UploadProps, UploadUserFile } from 'element-plus'
|
||||||
|
import { photosApi } from '/@/api/photos';
|
||||||
|
import { recommendWallApi } from '/@/api/service/wall';
|
||||||
|
import { applyApi } from '/@/api/service/apply';
|
||||||
|
import { attachmentApi } from '/@/api/attachment';
|
||||||
|
|
||||||
|
// 数据
|
||||||
|
const state = reactive({
|
||||||
|
tableData: {
|
||||||
|
data: [],
|
||||||
|
total: 0,
|
||||||
|
loading: false,
|
||||||
|
param: {
|
||||||
|
labelName: '',
|
||||||
|
serviceName: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
special: {
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
formData: {
|
||||||
|
cpLabelId: '',
|
||||||
|
serviceId: '',
|
||||||
|
number: '',
|
||||||
|
name: '',
|
||||||
|
originalPath: '',
|
||||||
|
watermarkPath: '',
|
||||||
|
price: '',
|
||||||
|
fileList: [],
|
||||||
|
ordFileList: [],
|
||||||
|
loading: false
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
fileList: [
|
||||||
|
{ required: true, message: '请选择水印图', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
ordFileList: [
|
||||||
|
{ required: true, message: '请选择原图', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
serviceId: [
|
||||||
|
{ required: true, message: '请选择应用服务', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
cpLabelId: [
|
||||||
|
{ required: true, message: '请选择标签', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
number: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
|
||||||
|
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 引入 api 请求接口
|
||||||
|
const photoApi = photosApi();
|
||||||
|
const wallApi = recommendWallApi();
|
||||||
|
const aplApi = applyApi();
|
||||||
|
const attApi = attachmentApi();
|
||||||
|
|
||||||
|
// 标签列表
|
||||||
|
const labelList = ref([]);
|
||||||
|
|
||||||
|
// 获取专题列表
|
||||||
|
const getSpecialList = async() => {
|
||||||
|
try {
|
||||||
|
state.tableData.loading = true;
|
||||||
|
let res = await aplApi.getAllServices();
|
||||||
|
if(res?.success){
|
||||||
|
state.special.data = res.data;
|
||||||
|
}else{
|
||||||
|
ElMessage.error('应用服务获取失败！');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
} finally {
|
||||||
|
state.tableData.loading = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取表格数据
|
||||||
|
const getTableData = async() => {
|
||||||
|
try {
|
||||||
|
state.tableData.loading = true;
|
||||||
|
|
||||||
|
let res = await wallApi.getWallList(state.tableData.param);
|
||||||
|
if(res?.success){
|
||||||
|
state.tableData.data = res.data.records;
|
||||||
|
state.tableData.total = res.data.total;
|
||||||
|
}else{
|
||||||
|
ElMessage.error('推荐作品获取失败！');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
} finally {
|
||||||
|
state.tableData.loading = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const reset = () =>{
|
||||||
|
state.tableData.param = {
|
||||||
|
current: 1,
|
||||||
|
serviceName: '',
|
||||||
|
labelName: '',
|
||||||
|
size: 10,
|
||||||
|
}
|
||||||
|
getTableData();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片链接格式化
|
||||||
|
const jpgFormatter = (path: any) => {
|
||||||
|
return path?.includes('://')?path : path;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通用格式化
|
||||||
|
const commonFormatter = (row: any, column: TableColumnCtx<String>) => {
|
||||||
|
return row[column.property] || '暂无';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 日期格式化
|
||||||
|
const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
|
||||||
|
let date = new Date(row.createtime);
|
||||||
|
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分页改变
|
||||||
|
const onHandleSizeChange = (val: number) => {
|
||||||
|
state.tableData.param.size = val;
|
||||||
|
getTableData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页改变
|
||||||
|
const onHandleCurrentChange = (val: number) => {
|
||||||
|
state.tableData.param.current = val;
|
||||||
|
getTableData();
|
||||||
|
};
|
||||||
|
// #endregion
|
||||||
|
|
||||||
|
// #region
|
||||||
|
const dialog = ref(false)
|
||||||
|
const flag = ref(false)
|
||||||
|
|
||||||
|
|
||||||
|
const formSize = ref<ComponentSize>('large')
|
||||||
|
const ruleFormRef = ref<FormInstance>()
|
||||||
|
const uploadDisabled = ref(false)
|
||||||
|
const ordUploadDisabled = ref(false)
|
||||||
|
const isHide = ref(false)
|
||||||
|
const headTitle = ref("")
|
||||||
|
|
||||||
|
const changeTitle = () => {
|
||||||
|
if (flag.value) {
|
||||||
|
headTitle.value="新增图片"
|
||||||
|
} else {
|
||||||
|
headTitle.value="编辑图片"
|
||||||
|
}
|
||||||
|
if (!isHide.value) {
|
||||||
|
headTitle.value="查看图片"
|
||||||
|
}
|
||||||
|
return headTitle.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取图片详情
|
||||||
|
const singleWall = async (id: number) => {
|
||||||
|
state.formData.loading = true;
|
||||||
|
let res = await wallApi.singleWall(id)
|
||||||
|
if (res?.success) {
|
||||||
|
state.formData.fileList.push({ url: jpgFormatter(res.data.watermarkPath) });
|
||||||
|
state.formData.ordFileList.push({ url: jpgFormatter(res.data.originalPath) });
|
||||||
|
Object.assign(state.formData, res.data);
|
||||||
|
uploadDisabled.value = true;
|
||||||
|
ordUploadDisabled.value = true;
|
||||||
|
state.formData.loading = false;
|
||||||
|
} else {
|
||||||
|
ElMessage.error('获取图片详情失败！')
|
||||||
|
state.formData.loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isForbidden = ref(false)
|
||||||
|
|
||||||
|
// 切换右侧边栏
|
||||||
|
const switchDrawer = async (staus:any,id: number) => {
|
||||||
|
if (staus == 1) {
|
||||||
|
flag.value = false;
|
||||||
|
isHide.value = true;
|
||||||
|
disabled.value = false;
|
||||||
|
singleWall(id);
|
||||||
|
} else {
|
||||||
|
console.log("添加图片");
|
||||||
|
flag.value = true;
|
||||||
|
isHide.value = true;
|
||||||
|
}
|
||||||
|
dialog.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加图片
|
||||||
|
const disabled = ref(false)
|
||||||
|
|
||||||
|
const handleChange: UploadProps['onChange'] = async (file: uploadFile, uploadFiles) => {
|
||||||
|
state.formData.loading = true;
|
||||||
|
if (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg' || file.raw.type === 'image/gif') {
|
||||||
|
state.formData.fileList = uploadFiles;
|
||||||
|
uploadDisabled.value = true;
|
||||||
|
try {
|
||||||
|
const formdata = new FormData();
|
||||||
|
formdata.append('file', file.raw);
|
||||||
|
formdata.append('type', 'picture');
|
||||||
|
let res = await attApi.uploadByType(formdata);
|
||||||
|
if(res?.success){
|
||||||
|
state.formData.watermarkPath = jpgFormatter(res.data);
|
||||||
|
ElMessage({message: '图片上传成功！',type: 'success',})
|
||||||
|
state.formData.loading = false;
|
||||||
|
}else{
|
||||||
|
ElMessage.error('图片上传失败！');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
state.formData.loading = false;
|
||||||
|
ElMessage.error('图片上传失败！');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessageBox.alert('图片的格式不正确，请重新选择！', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
})
|
||||||
|
uploadFiles.pop()
|
||||||
|
uploadDisabled.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleOrdChange: UploadProps['onChange'] = async (file: uploadFile, uploadFiles) => {
|
||||||
|
state.formData.loading = true;
|
||||||
|
if (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg' || file.raw.type === 'image/gif') {
|
||||||
|
state.formData.ordFileList = uploadFiles;
|
||||||
|
ordUploadDisabled.value = true;
|
||||||
|
try {
|
||||||
|
const formdata = new FormData();
|
||||||
|
formdata.append('file', file.raw);
|
||||||
|
formdata.append('type', 'picture');
|
||||||
|
let res = await attApi.uploadByType(formdata);
|
||||||
|
if(res?.success){
|
||||||
|
state.formData.originalPath = jpgFormatter(res.data);
|
||||||
|
ElMessage({message: '图片上传成功！',type: 'success',})
|
||||||
|
state.formData.loading = false;
|
||||||
|
}else{
|
||||||
|
ElMessage.error('图片上传失败！');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
state.formData.loading = false;
|
||||||
|
ElMessage.error('图片上传失败！');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessageBox.alert('图片的格式不正确，请重新选择！', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
})
|
||||||
|
uploadFiles.pop()
|
||||||
|
ordUploadDisabled.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogImageUrl = ref('')
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
|
||||||
|
const handlePictureCardPreview = (file: UploadFile,uploadFiles) => {
|
||||||
|
dialogImageUrl.value = file.url!
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const uploadRef = ref();
|
||||||
|
const ordUploadRef = ref();
|
||||||
|
const handleRemove = (file: UploadFile, uploadFiles) => {
|
||||||
|
uploadRef.value.clearFiles();
|
||||||
|
state.formData.watermarkPath = "";
|
||||||
|
state.formData.fileList = [];
|
||||||
|
uploadDisabled.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOrdRemove = (file: UploadFile, uploadFiles) => {
|
||||||
|
ordUploadRef.value.clearFiles();
|
||||||
|
state.formData.originalPath = "";
|
||||||
|
state.formData.ordFileList = [];
|
||||||
|
ordUploadDisabled.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 作品墙模块下的标签
|
||||||
|
const getLabelList = async() => {
|
||||||
|
try {
|
||||||
|
let res = await photoApi.getLabelList(4);
|
||||||
|
if(res?.success){
|
||||||
|
labelList.value = res.data;
|
||||||
|
}else{
|
||||||
|
ElMessage.error('标签列表获取失败！');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('标签列表获取失败！');
|
||||||
|
} finally {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除图片
|
||||||
|
const deleteBanner = (id: number) => {
|
||||||
|
ElMessageBox.confirm('确定要删除该作品吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(async() => {
|
||||||
|
try {
|
||||||
|
state.tableData.loading = true;
|
||||||
|
let res = await wallApi.deleteWall(id);
|
||||||
|
if(res?.success){
|
||||||
|
await getTableData();
|
||||||
|
ElMessage.success('图片删除成功！');
|
||||||
|
} else ElMessage.error('图片删除失败！');
|
||||||
|
} catch(e) {
|
||||||
|
ElMessage.error('删除失败！');
|
||||||
|
} finally {
|
||||||
|
state.tableData.loading = false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const submitForm = (decision:any) => {
|
||||||
|
ruleFormRef.value?.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const form = { ...state.formData };
|
||||||
|
let res;
|
||||||
|
if (decision) {
|
||||||
|
res = await wallApi.saveWall(form);
|
||||||
|
} else {
|
||||||
|
res = await wallApi.updateWall(form);
|
||||||
|
}
|
||||||
|
if (res?.success) {
|
||||||
|
ElMessage({
|
||||||
|
message: '保存成功！',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
loading.value = false;
|
||||||
|
getTableData();
|
||||||
|
dialog.value = false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('保存失败！');
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error('请填写必要信息！');
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
dialog.value = false;
|
||||||
|
ruleFormRef.value?.resetFields();
|
||||||
|
state.formData.fileList.pop();
|
||||||
|
state.formData.ordFileList.pop();
|
||||||
|
uploadDisabled.value = false;
|
||||||
|
ordUploadDisabled.value = false;
|
||||||
|
isForbidden.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getTableData();
|
||||||
|
getLabelList();
|
||||||
|
getSpecialList();
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.system-dept-container {
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
::v-deep .el-table th,
|
||||||
|
::v-deep .el-table td {
|
||||||
|
padding: 13px;
|
||||||
|
text-align: left; // 左对齐文字
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table-column--center {
|
||||||
|
text-align: center; // 居中对齐特定列
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table__header-wrapper {
|
||||||
|
background-color: #f5f7fa; // 为表头设置背景颜色
|
||||||
|
padding: 0; // 减少表头的内边距
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table__body{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-image {
|
||||||
|
width: 75px; // 固定图片宽度
|
||||||
|
height: 75px; // 固定图片高度
|
||||||
|
object-fit: cover; // 图片居中剪裁
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-drawer .el-drawer__header {
|
||||||
|
margin: 15px 0 20px 0!important;
|
||||||
|
border-bottom: 0!important;
|
||||||
|
}
|
||||||
|
::v-deep .el-drawer__title {
|
||||||
|
font-size: 28px!important;
|
||||||
|
}
|
||||||
|
::v-deep .el-form-item--large{
|
||||||
|
--font-size: 18px;
|
||||||
|
margin-bottom: 28px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-drawer__footer{
|
||||||
|
margin:40px 0 0 150px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .disabled{
|
||||||
|
.el-upload--picture-card{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-select--large .el-select__wrapper {
|
||||||
|
padding: 5px 10px;
|
||||||
|
min-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-form {
|
||||||
|
margin: 0 19px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user