hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

整合业务模块

Browse Source
This commit is contained in:
Double-_-Z 2024-12-16 22:04:05 +08:00
parent 2f110d5e8d
commit 76b4122f1c
20 changed files with 995 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -20,7 +20,7 @@ import other from '/@/utils/other';
import { Local, Session } from '/@/utils/storage';
import mittBus from '/@/utils/mitt';
import setIntroduction from '/@/utils/setIconfont';
import logoMini from '/@/assets/logo-mini.svg';
import logoMini from '/@/assets/logo.png';
// 引入组件
const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
@ -74,7 +74,7 @@ const getGlobalI18n = computed(() => {
let link: any = document.querySelector("link[rel*='icon']") || document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = themeConfig.value.logoMini||logoMini;
link.href = themeConfig.logoMini||logoMini;
document.getElementsByTagName("head")[0].appendChild(link);
// 设置初始化，防止刷新时恢复默认

50
src/api/service/apply/index.ts Normal file
View File

@ -0,0 +1,50 @@
import request from '/@/utils/request';
import { pixelUrlHost } from '/@/api/baseUrlHost';
/**
* （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
* 注意在写get请求时，参数是params，而不是data，要标注好
*
* 登录api接口集合
* @method getServicesList 获取应用服务列表
* @method getApplyDetail 获取应用服务详情
* @method updateApply 更新应用服务
*/
export function applyApi() {
return {
getServicesList: (params: object) => {
return request({
url: pixelUrlHost + '/paServices',
method: 'get',
params,
});
},
getApplyDetail: (id: Number) => {
return request({
url: pixelUrlHost + `/paServices/${id}`,
method: 'get',
});
},
saveApply: (data: object) => {
return request({
url: pixelUrlHost + '/paServices',
method: 'post',
data,
})
},
updateApply: (data: object) => {
return request({
url: pixelUrlHost + '/paServices',
method: 'put',
data,
})
},
deleteApply: (id: Number) => {
return request({
url: pixelUrlHost + `/paServices/${id}`,
method: 'delete',
});
},
};
}

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

12
src/i18n/lang/en.ts
View File

@ -11,7 +11,7 @@ export default {
UserManage: 'UserManage',
systemDic: 'systemDic',
article: 'article',
apply: 'apply',
applyDetail: 'applyDetail',
message: 'message',
order: 'order',
articleContent: 'articleContent',
@ -100,6 +100,16 @@ export default {
layoutLinkView: 'LinkView',
layoutIframeViewOne: 'IframeViewOne',
layoutIframeViewTwo: 'IframeViewTwo',
/**
* 业务模块start
* @name 业务模块
*/
apply: 'apply',
/**
* 业务模块end
*/
},
staticRoutes: {
signIn: 'signIn',

12
src/i18n/lang/zh-cn.ts
View File

@ -11,7 +11,7 @@ export default {
systemDept: '部门管理',
systemDic: '字典管理',
article: '文章管理',
apply: '应用管理',
applyDetail: '应用服务详情',
carousel: '轮播图管理',
clients: '客户管理',
photos: '图片管理',
@ -103,6 +103,16 @@ export default {
layoutLinkView: '外链',
layoutIframeViewOne: '内嵌 iframe1',
layoutIframeViewTwo: '内嵌 iframe2',
/**
* 业务模块start
* @name 业务模块
*/
apply: '应用管理',
/**
* 业务模块end
*/
},
staticRoutes: {
signIn: '登录',

12
src/i18n/lang/zh-tw.ts
View File

@ -11,7 +11,7 @@ export default {
systemDept: '部門管理',
systemDic: '字典管理',
article: '文章管理',
apply: '应用管理',
applyDetail: '應用服務詳情',
message: '聯言管理',
articleContent: '文章詳情',
order: '訂單管理',
@ -100,6 +100,16 @@ export default {
layoutLinkView: '外鏈',
layoutIframeViewOne: '内嵌 iframe1',
layoutIframeViewTwo: '内嵌 iframe2',
/**
* 业务模块start
* @name 业务模块
*/
apply: '應用管理',
/**
* 业务模块end
*/
},
staticRoutes: {
signIn: '登入',

2
src/layout/logo/index.vue
View File

@ -12,7 +12,7 @@
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import logoMini from '/@/assets/logo-mini.svg';
import logoMini from '/@/assets/logo.png';
// 定义变量内容
const storesThemeConfig = useThemeConfig();

60
src/router/route.ts
View File

@ -251,23 +251,51 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
}
]
},
/**
*
* 业务模块start
* @name 业务模块
* 应用服务路由——/apply
*
*/
// 应用管理
// {
// path: '/apply',
// name: 'apply',
// component: () => import('/@/views/apply/index.vue'),
// meta: {
// title: 'message.router.apply',
// isLink: '',
// isHide: false,
// isKeepAlive: true,
// isAffix: false,
// isIframe: false,
// roles: ['admin', 'common'],
// icon: 'iconfont icon-crew_feature',
// },
// children: []
// },
{
path: '/apply',
name: 'apply',
component: () => import('/@/views/service/apply/index.vue'),
meta: {
title: 'message.router.apply',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin', 'common'],
icon: 'iconfont icon-crew_feature',
},
children: [
// {
// path: '/apply/detail',
// name: 'applyDetail',
// component: () => import('/@/views/service/apply/detail.vue'),
// meta: {
// title: 'message.router.applyDetail',
// isLink: '',
// isHide: true,
// isKeepAlive: true,
// isAffix: false,
// isIframe: false,
// roles: ['admin', 'common'],
// icon: 'ele-Document',
// },
// },
]
},
/**
* 业务模块end
*/
// 轮播图管理
{
path: '/carousel',

18
src/stores/themeConfig.ts
View File

@ -78,7 +78,7 @@ export const useThemeConfig = defineStore('themeConfig', {
* 界面显示
*/
// 是否开启侧边栏 Logo
isShowLogo: false,
isShowLogo: true,
// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
isShowLogoChange: false,
// 是否开启 Breadcrumb，强制经典、横向布局不显示
@ -102,13 +102,13 @@ export const useThemeConfig = defineStore('themeConfig', {
// 是否开启色弱模式
isInvert: false,
// 是否开启水印
isWartermark: true,
isWartermark: false,
// 水印文案
wartermarkText: 'vue-next-admin',
wartermarkText: 'pixel.ai制图后台',
// 页脚版权信息内容
globalFootTitleMsg: '深圳市 xxx 公司版权所有',
globalFootTitleMsg: '广州市 xxx 公司版权所有',
// 页脚tip
globalFootTipMsg: 'vue-next-admin，Made by lyt with ❤️',
globalFootTipMsg: 'ai创作，专享您的制图~~~',
/**
* 其它设置
@ -141,17 +141,17 @@ export const useThemeConfig = defineStore('themeConfig', {
* 全局网站标题 / 副标题
*/
// 网站主标题（菜单导航、浏览器当前网页标题）
globalTitle: 'vue-next-admin',
globalTitle: 'pixel.ai制图后台',
// 网站副标题（登录页顶部文字）
globalViceTitle: 'vueNextAdmin',
globalViceTitle: 'pixel.ai',
// 网站副标题（登录页顶部文字）
globalViceTitleMsg: '专注、免费、开源、维护、解疑',
globalViceTitleMsg: '多种类、多趣味、多质图',
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
globalI18n: 'zh-cn',
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
globalComponentSize: 'large',
// 网站logo
logoMini: '/@/assets/logo-mini.svg',
logoMini: '/@/assets/logo.png',
},
}),
actions: {

2
src/utils/request.ts
View File

@ -44,6 +44,8 @@ service.interceptors.response.use(
ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
.then(() => {})
.catch(() => {});
}else if(res.code === 502 && res.errorMsg){
return res;
}
return Promise.reject(service.interceptors.response);
} else {

44
src/views/carousel/index.vue
View File

@ -24,22 +24,23 @@
</el-button> -->
<!-- </div> -->
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%;" class="custom-table">
<el-table-column prop="name" label="轮播图名称" show-overflow-tooltip width="210px"></el-table-column>
<el-table-column label="素材" width="350px" align="center">
<el-table-column prop="name" label="轮播图名称" width="150px" show-overflow-tooltip></el-table-column>
<el-table-column label="素材" align="center">
<template #default="scope">
<el-image :src="encodeURI(viteUrl+scope.row.path)" />
<el-image :src="encodeURI(viteUrl+scope.row.path)" lazy
preview-teleported="true" :preview-src-list="[encodeURI(viteUrl+scope.row.path)]"/>
<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
<!-- <el-button @click="jpgJump(scope.row)" text type="primary">{{ jpgFormatter(scope.row) }}</el-button> -->
</template>
</el-table-column>
<el-table-column label="跳转地址" show-overflow-tooltip width="350px" align="center">
<el-table-column label="跳转地址" show-overflow-tooltip align="center">
<template #default="scope">
<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
<el-button @click="jpgJump(scope.row)" text type="primary">{{ scope.row.url }}</el-button>
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序号" sortable show-overflow-tooltip width="150px" align="center"></el-table-column>
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="250px" align="center"></el-table-column>
<el-table-column prop="orderNum" label="排序号" sortable 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="300" align="center">
<template #default="scope">
<el-button size="small" text type="primary" @click="switchDrawer(scope.row.id,1)">
@ -90,7 +91,7 @@
<el-icon><Plus /></el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<img class="el-upload-list__item-thumbnail" :src="encodeURI(file.url)" alt="" />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@ -231,38 +232,18 @@ const viteUrl = import.meta.env.VITE_API_URL;
// 图片链接格式化
const jpgFormatter = (row: any) => {
console.log("44444444444",row);
let newPath;
if (row?.data) {
newPath = row.data.path.replaceAll('\\', '/')
console.log("11111111111",newPath);
} else {
newPath = row.path.replaceAll('\\\\', '/')
console.log("333333333333",newPath);
}
newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
console.log("22222222222222222",newPath);
newPath = newPath.includes('http://localhost:8888/') ? newPath : encodeURI(viteUrl + newPath)
return `${newPath}`;
// window.open(newPath);
};
//轮播图跳转
const jpgJump = (row:any) =>{
// console.log("44444444444",row);
// let newPath;
// if (row?.data) {
// newPath = row.data.path.replaceAll('\\', '/')
// console.log("11111111111",newPath);
// } else {
// newPath = row.path.replaceAll('\\\\', '/')
// console.log("333333333333",newPath);
// }
// newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
// console.log("22222222222222222",newPath);
window.open(row.url);
};
@ -328,10 +309,7 @@ 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') {
console.log("handleChange1",file);
console.log("handleChange2",uploadFiles);
state.formData.fileList = uploadFiles;
console.log("handleChange",state.formData.fileList);
uploadDisabled.value = true;
try {
const formdata = new FormData();
@ -408,10 +386,6 @@ const deleteBanner = (id: number) => {
state.tableData.loading = false;
}
}).catch(() => {
ElMessage({
type: 'info',
message: '删除取消',
})
})
}

2
src/views/login/component/account.vue
View File

@ -119,7 +119,7 @@ const onSignIn = async () => {
signInSuccess(isNoPower);
}
}else{
ElMessage.error(res.message);
ElMessage.error(res.errorMsg||res.message);
}
} catch (error) {
ElMessage.error('账号或密码错误！');

2
src/views/login/index.vue
View File

@ -47,7 +47,7 @@ import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import logoMini from '/@/assets/logo-mini.svg';
import logoMini from '/@/assets/logo.png';
import loginMain from '/@/assets/login-main.svg';
import loginBg from '/@/assets/login-bg.svg';

1
src/views/message/index.vue
View File

@ -28,6 +28,7 @@
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" text type="primary" @click="toShowDetail(scope.row.id)">查看详情</el-button>
<el-button size="small" text type="primary">回复</el-button>
</template>
</el-table-column>
</el-table>

19
src/views/photos/index.vue
View File

@ -46,9 +46,7 @@
<el-table-column prop="name" label="图片名称" show-overflow-tooltip width="180px"></el-table-column>
<el-table-column label="素材" width="300px" align="center">
<template #default="scope">
<el-image :src="jpgFormatter(scope.row)" />
<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
<!-- <el-button @click="jpgJump(scope.row)" text type="primary">{{ jpgFormatter(scope.row) }}</el-button> -->
<el-image lazy :src="jpgFormatter(scope.row)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row)]"/>
</template>
</el-table-column>
<el-table-column prop="moduleName" label="模块" show-overflow-tooltip width="200px" align="center"></el-table-column>
@ -305,19 +303,14 @@ const viteUrl = import.meta.env.VITE_API_URL;
// 图片链接格式化
const jpgFormatter = (row: any) => {
// console.log("44444444444",row);
let newPath;
if (row?.data) {
newPath = row.data.path.replaceAll('\\', '/')
// console.log("11111111111",newPath);
} else {
newPath = row.path.replaceAll('\\\\', '/')
// console.log("333333333333",newPath);
}
newPath = newPath.includes('http://8.138.171.103/') ? newPath : 'http://8.138.171.103/' + newPath
// console.log("22222222222222222",newPath);
newPath = newPath.includes('http://8.138.171.103/') ? newPath : encodeURI(viteUrl + newPath)
return `${newPath}`;
}
@ -461,19 +454,13 @@ const handleRemove = (file: UploadFile, uploadFiles) => {
//下载图片
const download = async(row:any) =>{
state.formData.loading = true;
// console.log("44444444444",row);
let newPath;
if (row?.data) {
newPath = row.data.path.replaceAll('\\', '/')
// console.log("11111111111",newPath);
} else {
newPath = row.path.replaceAll('\\\\', '/')
// console.log("333333333333",newPath);
}
newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
// console.log("22222222222222222",newPath);
try{
await downloadPhoto(newPath);

96
src/views/service/apply/detail.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<div class="layout-pd system-dept-container">
<el-card class="apply-detail" v-loading="state.loading" shadow="hover">
<div class="top-box">
<div class="box-left">
<div class="tbl-left">
<img :src="viteUrl+(state.data.icon||defaultIcon)" :alt="state.data.name" />
</div>
<div class="tbl-right">
<div class="title">{{state.data.name}}</div>
<div class="tips">{{state.data.tips}}</div>
</div>
</div>
<div class="box-right">
</div>
</div>
<div class="bottom-box"></div>
</el-card>
</div>
</template>
<script setup lang="ts" name="applyDetail">
import { onMounted, reactive } from 'vue';
import { applyApi } from '/@/api/service/apply';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
// 封面基本路径
const viteUrl = import.meta.env.VITE_API_URL;
const defaultIcon:string = 'static/pixel/home/default-work.png';
// 引入 api 请求接口
const aplApi = applyApi();
// 获取模块名称和标签名称
const route = useRoute();
const id:any = route.query.id;
const state = reactive<any>({
data: {},
loading: false,
})
// 获取文章详情-根据id
const getApplyDetailById = async(id:number) => {
try {
state.loading = true;
let res = await aplApi.getApplyDetail(id);
if(res?.success) {
state.data = res.data;
}
} catch (error) {
ElMessage.error('获取应用服务详情失败');
} finally {
state.loading = false;
}
}
onMounted(() => {
getApplyDetailById(id);
})
</script>
<style scoped lang="scss">
.system-dept-container {
height: 100%;
display: flex;
flex-direction: column;
.apply-detail{
flex: 1;
display: flex;
flex-direction: column;
.top-box{
display: flex;
margin: 0 20px;
background-color: aqua;
flex-wrap: wrap;
.box-left{
display: flex;
min-width: 60%;
background-color: aquamarine;
img{
width: 120px;
height: 120px;
}
}
.box-right{
min-width: 40%;
background-color: bisque;
}
}
}
}
</style>

319
src/views/service/apply/dialog.vue Normal file
View File

@ -0,0 +1,319 @@
<template>
<div class="system-menu-dialog-container">
<el-dialog @close="closeDialog" :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
<el-form v-loading="state.loading" ref="applyDialogFormRef" :model="state.data" :rules="state.rules" size="default" label-width="100px">
<el-row :gutter="35">
<el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="mb20">
<el-form-item label="图标：" class="iconImg">
<!-- 上传文件 -->
<el-upload ref="uploadRef" class="h100 personal-user-left-upload" action="#" list-type="picture-card" :file-list="state.fileArray"
:auto-upload="false" :limit="1" :class="{ hide: state.coverHide }" @change="handleUploadChange" 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="handleRemove(file)">
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="应用名称：" prop="name">
<el-input v-model="state.data.name" placeholder="请输入应用名称" clearable></el-input>
</el-form-item>
<el-form-item label="接口名：" prop="api">
<el-input v-model="state.data.api" placeholder="请输入接口名" clearable></el-input>
</el-form-item>
<el-form-item label="提示词：" prop="tips">
<el-input v-model="state.data.tips" placeholder="请输入提示词" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="35">
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="8" class="mb20">
<el-form-item label="价格：" prop="price">
<el-input-number v-model="state.data.price" :min="0" controls-position="right">
<template #prefix><span>￥</span></template>
</el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
<el-form-item label="排序号：" prop="position">
<el-input-number v-model="state.data.position" :min="1" controls-position="right" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="8" class="mb20">
<el-form-item label="类型：" prop="type">
<el-select size="default" v-model="state.data.type" placeholder="请选择应用类型" clearable>
<el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
<el-form-item label="是否上架：" prop="publish">
<el-switch v-model="state.data.publish" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" class="mb20" v-if="state.data.options&&state.data.options.length>0">
<el-form-item label="选项：">
<div class="tags-option">
<el-tag v-for="option in state.data.options" :key="option.id" :disable-transitions="false">{{ option.optionName }}</el-tag>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button size="danger" plain v-if="state.dialog.type === 'edit'" @click="deleteApply">删 除</el-button>
<el-button type="primary" plain @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
</span>
</template>
</el-dialog>
<!-- 封面预览弹窗 -->
<el-dialog v-model="dialogVisible">
<img width="100%" w-full :src="dialogImageUrl" alt="预览" />
</el-dialog>
</div>
</template>
<script setup lang="ts" name="applyDialog">
import { ElMessage, ElMessageBox, UploadFile, UploadFiles } from 'element-plus';
import { applyApi } from '/@/api/service/apply';
import { articleApi } from '/@/api/article';
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const applyDialogFormRef = ref();
const state:any = reactive({
data: {
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
loading: false,
rules: {
name: { required: true, message: '请输入应用名称', trigger: 'blur' },
api: { required: true, message: '请输入接口名', trigger: 'blur' },
tips: { required: true, message: '请输入提示词', trigger: 'blur' },
price: { required: true, message: '请输入价格', trigger: 'blur' },
position: { required: true, message: '请输入排序号', trigger: 'blur' },
type: { required: true, message: '请选择应用类型', trigger: 'blur' },
},
fileArray:[],// 编辑进来时，如果已经上传了图片，则保存图片地址
coverFile: {},
coverHide: false
});
// 类型列表
const typeList = ref([
{id: '0',name: '图生图'},
{id: '1',name: '文生图'},
{id: '2',name: '选项+图片'},
{id: '3',name: '选项+文字'},
{id: '4',name: '换装'},
]);
// 引入 api 请求接口
const aplApi = applyApi();
const artApi = articleApi();
// 图标上传禁用
const disabled = ref(false);
// 图标弹窗
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
// 基本路径
const viteUrl = import.meta.env.VITE_API_URL;
// upload/Attachment/20241207/0fb6372ed5cd4fb9be68315301093f57.png
const defaultIcon:string = 'static/pixel/home/default-work.png';
const uploadRef = ref();
// 图标图片更改
const handleUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
if(uploadFile.raw.type.includes('image')){
const file:any = uploadFile.raw;
state.coverFile = file;
state.coverHide = true;
}else{
ElMessage.error('请上传图片文件！');
uploadRef.value.clearFiles();
}
}
// 图标删除
const handleRemove = (file?: UploadFile) => {
state.coverFile = {};
uploadRef.value.clearFiles();
state.coverHide = false;
}
// 图标预览
const handlePictureCardPreview = (file: UploadFile) => {
dialogImageUrl.value = file.url!
dialogVisible.value = true
}
// 获取详情
const getData = (id: number) => {
try {
state.loading = true;
aplApi.getApplyDetail(id).then((res: any) => {
if(!res?.success){
ElMessage.error('服务详情获取失败！');
return;
}
state.data = res.data;
state.data.publish = res.data.publish === 1;
const never:any = [{name:res.data.name,url:encodeURI(viteUrl+(res.data.icon||defaultIcon))}];
state.fileArray = never;
})
} catch (error) {
ElMessage.error('服务详情获取失败！');
} finally {
state.loading = false;
}
}
// 打开弹窗
const openDialog = (type: string, row?: any) => {
if (type === 'edit') {
getData(row.id);
state.dialog.title = '修改应用';
state.dialog.submitTxt = '修 改';
state.coverHide = true;
} else {
state.dialog.title = '新增应用';
state.dialog.submitTxt = '新 增';
}
state.dialog.type = type;
state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
setTimeout(() => {
state.dialog.isShowDialog = false;
state.data = {};
state.fileArray = [];
handleRemove();
}, 300)
};
// 取消
const onCancel = () => {
closeDialog();
};
// 删除应用服务
const deleteApply = () => {
ElMessageBox.confirm(`确定要删除${state.data.name}吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async() => {
try {
state.loading = true;
let res = await aplApi.deleteApply(state.data.id);
if(res?.success){
ElMessage.success(`${state.data.name}删除成功！`);
closeDialog(); // 关闭弹窗
emit('refresh');
} else ElMessage.error(`${state.data.name}删除失败！`);
} catch(e) {
ElMessage.error('处理失败！');
} finally {
state.loading = false;
}
})
}
// 上传文件
const uploadFile = async(file: any,form: any) => {
try {
state.loading = true;
const formdata = new FormData();
formdata.append('file', file);
let res = await artApi.uploadFile(formdata);
if(res?.success){
form.icon = res.data.path;
realSubmit(form);
}else{
ElMessage.error('封面上传失败！');
}
} catch (error) {
state.loading = false;
ElMessage.error('封面上传失败！');
}
}
// 提交
const onSubmit = () => {
applyDialogFormRef.value.validate((valid: boolean) => {
if (valid && state.coverHide){
const form = {...state.data,publish:state.data.publish ? 1 : 0};
if(state.coverFile.type === undefined){
realSubmit(form);
}else{
uploadFile(state.coverFile,form);
}
}else{
ElMessage.error('请完善信息！');
}
});
};
// 应用服务上传-真正的上传操作
const realSubmit = async(form: any) => {
try {
state.loading = true;
let res = state.dialog.type === 'add' ? await aplApi.saveApply(form) : await aplApi.updateApply(form);
if(res?.success){
ElMessage.success('应用服务保存成功！');
closeDialog(); // 关闭弹窗
emit('refresh');
}else{
ElMessage.error('应用服务保存失败！');
}
} catch (error) {
ElMessage.error('处理失败！');
} finally {
state.loading = false;
}
}
// 暴露变量
defineExpose({
openDialog,
});
</script>
<style scoped lang="scss">
.iconImg :deep(.hide .el-upload--picture-card) {
display: none;
}
.tags-option{
width: 100%;
height: 90px;
overflow-y: scroll;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px,100px) );
grid-gap: 0.4em 0.8em;
// grid-auto-flow: column dense;
}
</style>

397
src/views/service/apply/index.vue Normal file
View File

@ -0,0 +1,397 @@
<template>
<div class="system-dept-container layout-pd">
<el-card
shadow="hover"
class="filtering-list br-top-no"
v-loading="state.tableData.loading"
element-loading-text="加载中..."
:class="{ 'min-h-360': state.tableData.data.length <= 0 }"
>
<div class="system-dept-search mb15">
应用名称：<el-input size="default" placeholder="请输入应用名称" v-model="state.tableData.param.name"
class="ml10" style="max-width: 180px" clearable></el-input>
<el-button @click="getTableData" size="default" type="primary" class="ml10">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button @click="reset" size="default" type="primary" class="ml10">
<el-icon>
<ele-RefreshRight />
</el-icon>
重置
</el-button>
<el-button size="default" type="success" class="ml10" @click="addApply">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增应用
</el-button>
</div>
<div v-for="(val, key) in state.filtering" :key="key" ref="dlRefs" class="filtering-list-flex">
<div class="filtering-list-title">{{ val.title }}</div>
<div class="filtering-list-item" :style="{ height: val.isMore ? 'auto' : '50px' }">
<span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">
{{ v.label }}
</span>
<div class="dd-more" v-if="val.isShowMore" @click="val.isMore = !val.isMore">
<span>{{ val.isMore ? '收起' : '展开' }}</span>
<i :class="val.isMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
</div>
</div>
</div>
<div class="flex-warp mt15 mb15" v-if="state.tableData.data.length > 0">
<el-row :gutter="15">
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4" class="mb15" v-for="(v, k) in state.tableData.data" :key="k" @click="onTableItemClick(v)">
<el-card class="flex-warp-item" shadow="hover" @click="toShowDetail(v)" :title="`￥ ${v.price}钻石`">
<div class="card-item-left">
<img :src="encodeURI(viteUrl + (v.icon||defaultIcon))" :alt="v.name">
</div>
<div class="card-item-right">
<div class="cir-one">{{ v.name }}</div>
<div class="cir-two">{{ v.tips || 'pixel.ai制图功能，开始魔法~~' }}</div>
<div class="cir-three">
<el-tag type="info" round>{{ state.filtering[0].children[Number(v.type)+1].label }}</el-tag>
<div>{{ getDate(v.createtime) }}</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
<div v-else class="filtering-no-data">
<div class="no-data-box">
<i class="el-icon-search"></i>
<div class="no-txt">暂无数据</div>
</div>
</div>
<template v-if="state.tableData.data.length > 0">
<div class="bottom-pagination">
<el-pagination
style="text-align: right"
background
@size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
:page-sizes="[16, 32, 64]"
:current-page="state.tableData.param.current"
:page-size="state.tableData.param.size"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
<!-- <div class="bottom-tips">tips：右键应用 修改/删除</div> -->
</div>
</template>
</el-card>
<ApplyDialog ref="applyDialogRef" @refresh="getTableData()" />
</div>
</template>
<script setup lang="ts" name="apply">
import { ElMessage } from 'element-plus';
import { applyApi } from '/@/api/service/apply';
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
// 基本路径
const viteUrl = import.meta.env.VITE_API_URL;
// upload/Attachment/20241207/0fb6372ed5cd4fb9be68315301093f57.png
const defaultIcon:string = 'static/pixel/home/default-work.png';
// 引入弹窗
const ApplyDialog = defineAsyncComponent(() => import('/@/views/service/apply/dialog.vue'));
const applyDialogRef = ref();
// 表格数据
const state: any = reactive({
// 导航数据
filtering : [
{
title: '类型',
isMore: false,
isShowMore: false,
id: 0,
children: [
{id: '-1',label: '全部',active: true,},
{id: '0',label: '图生图',active: false,},
{id: '1',label: '文生图',active: false,},
{id: '2',label: '选项+图片',active: false,},
{id: '3',label: '选项+文字',active: false,},
{id: '4',label: '换装',active: false,},
],
},
{
title: '状态',
isMore: false,
isShowMore: false,
id: 1,
children: [
{id: '-1',label: '全部',active: true,},
{id: '0',label: '上架',active: false,},
{id: '1',label: '下架',active: false,}
],
}
],
tableData: {
data: [],
total: 0,
loading: false,
param: {
name: '',
current: 1,
size: 16,
},
},
});
// 引入 api 请求接口
const aplApi = applyApi();
// 过滤当前选中的数据
const onSelItem = (val: FilteringRowType, v: FilteringChilType) => {
val.children.map((v: FilteringChilType) => (v.active = false));
v.active = true;
state.tableData.loading = true;
setTimeout(() => {
state.tableData.loading = false;
}, 500);
};
// 当前列表项点击
const onTableItemClick = (v: FilterListType) => {
};
// 时间格式化
const getDate = (val: string) => {
const date = new Date(val);
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
// 重置
const reset = () =>{
state.tableData.param = {
name: '',
current: 1,
size: 16,
}
getTableData();
}
// 获取表格数据
const getTableData = async() => {
try {
state.tableData.loading = true;
let res = await aplApi.getServicesList(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 onHandleSizeChange = (val: number) => {
state.tableData.param.size = val;
// getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.current = val;
// getTableData();
};
// 新增应用
const addApply = () => {
applyDialogRef.value.openDialog('add');
}
// 查看详情-编辑
const toShowDetail = (row: any) => {
applyDialogRef.value.openDialog('edit',row);
// router.push({ path: '/apply/detail', query: { id:id } });
}
onMounted(() => {
getTableData();
})
</script>
<style scoped lang="scss">
.system-dept-container {
display: flex;
min-height: 92vh;
.filtering-list {
flex: 1;
overflow: hidden;
border-bottom: none !important;
.filtering-list-flex {
&:last-of-type {
.filtering-list-item {
border-bottom: none !important;
}
}
.filtering-list-title {
float: left;
width: 64px;
font-weight: 700;
position: relative;
color: #909399;
margin: 15px 0;
&:after {
content: '';
position: absolute;
border: 1px solid #909399;
border-width: 0 1px 1px 0;
width: 4px;
height: 4px;
transform: rotate(-45deg) translateY(-50%);
right: 10px;
top: 50%;
}
}
.filtering-list-item {
border-bottom: 1px dotted var(--next-border-color-light);
margin-left: 64px;
overflow: hidden;
position: relative;
.span {
color: #8d8d91;
font-size: 14px;
float: left;
padding: 0 15px;
margin: 15px 0;
&:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
.dd-active {
color: var(--el-color-primary);
}
.dd-more {
font-size: 12px;
position: absolute;
right: 0;
top: 16px;
color: #a5a5a5;
&:hover {
cursor: pointer;
color: #8d8d91;
}
}
}
}
}
.br-top-no {
border-top: none;
.flex-warp {
flex: 1;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
margin: 0 -5px;
.el-row {
width: 101%;
}
.flex-warp-item {
padding: 5px;
height: 120px;
border-radius: 12px;
cursor: pointer;
&:hover{
margin-top: -10px;
}
.card-item-left{
width: 80px;
height: 80px;
img{
width: 100%;
height: 100%;
}
margin-right: 14px;
}
.card-item-right{
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
white-space: nowrap;
.cir-one{
font-size: 1.3em;
font-weight: bold;
color: rgba($color: #000000, $alpha: 0.8);
margin-bottom: 0.6em;
text-overflow: ellipsis;
overflow: hidden;
}
.cir-two{
font-size: 1.15em;
color: #8f969c;
margin-bottom: 0.6em;
text-overflow: ellipsis;
overflow: hidden;
}
.cir-three{
display: flex;
align-items: center;
justify-content: space-between;
color: #8f969c;
div{
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
:deep(.el-card__body) {
flex-direction: row;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
}
}
:deep(.el-card__body) {
height: 100%;
// width: 100%;
display: flex;
flex-direction: column;
.filtering-no-data {
display: flex;
height: 100%;
.no-data-box {
color: #cccccc;
margin: auto;
i {
font-size: 70px;
}
.no-txt {
font-size: 14px;
text-align: center;
margin-top: 15px;
}
}
}
}
}
.min-h-360 {
// height: 360px;
}
}
.bottom-pagination{
display: flex;
align-items: center;
justify-content: space-between;
.bottom-tips{
margin-right: 10px;
color: #8d8d91;
}
}
</style>

9
src/views/website/index.vue
View File

@ -301,7 +301,8 @@
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.logoSetting') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-upload ref="uploadRef" action="#" :limit="1" :auto-upload="false" @change="onWartermarkLogoUpload" :on-preview="handlePreview"
:file-list="getThemeConfig.logoMini?[{name:getThemeConfig.globalTitle,url:getThemeConfig.logoMini}]:[]" accept='image/*' :on-remove="handleRemove">
:file-list="getThemeConfig.logoMini?[{name:getThemeConfig.globalTitle,url:getThemeConfig.logoMini}]:
[]" accept='image/*' :on-remove="handleRemove">
<template #default>
<el-button v-if="!getThemeConfig.logoMini" class="logo-picture" type="text">上传文件</el-button>
</template>
@ -475,7 +476,7 @@ import commonFunction from '/@/utils/commonFunction';
import other from '/@/utils/other';
import mittBus from '/@/utils/mitt';
import { articleApi } from '/@/api/article';
import logoMini from '/@/assets/logo-mini.svg';
import logoMini from '/@/assets/logo.png';
const state = reactive({
isMobile: false,
@ -643,8 +644,8 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) =>{
};
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
// onWartermarkLogoMiniInput('/src/assets/logo-mini.svg');
onWartermarkLogoMiniInput('');
uploadRef.value.clearFiles();
onWartermarkLogoMiniInput('');
}
// 封面基本路径
const viteUrl = import.meta.env.VITE_API_URL;
@ -722,6 +723,8 @@ const onCopyConfigClick = () => {
// 一键恢复默认
const onResetConfigClick = () => {
Local.clear();
onWartermarkLogoMiniInput('');
uploadRef.value.clearFiles();
window.location.reload();
// @ts-ignore
Local.set('version', __NEXT_VERSION__);

23
vite.config.ts
View File

@ -15,6 +15,9 @@ const alias: Record<string, string> = {
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
};
// 请求映射后端路径
const url:string = 'http://8.138.171.103';
const viteConfig = defineConfig((mode: ConfigEnv) => {
const env = loadEnv(mode.mode, process.cwd());
@ -31,7 +34,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
hmr: true,
proxy: {
'/vueAdminApi': {
target: 'http://8.138.171.103:8081',
target: url+':8081',
// target: 'http://8.138.175.106:8090',
// target: 'https://www.ymsc.org.cn/vueAdminApi',
ws: true,
@ -40,7 +43,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
rewrite: (path) => path.replace(/^\/vueAdminApi/, ''),
},
'/pixelApi': {
target: 'http://8.138.171.103:8082',
target: url+'/pixelApi',
ws: true,
secure: false,
changeOrigin: true,
@ -56,13 +59,27 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
rewrite: (path) => path.replace(/^\/vueAdmin/, ''),
},
'/upload': {
target: 'http://8.138.171.103',
target: url,
// target: 'http://8.138.175.106',
// target: 'https://www.ymsc.org.cn/upload',
secure: false,
ws: true,
changeOrigin: true,
},
'/aiupload': {
target: url,
// target: 'http://8.138.175.106',
// target: 'https://www.ymsc.org.cn/upload',
secure: false,
ws: true,
changeOrigin: true,
},
'/static': {
target: url,
secure: false,
ws: true,
changeOrigin: true,
},
'/gitee': {
target: 'https://gitee.com',
ws: true,