cai三个模块的开发
This commit is contained in:
parent
6bea984e06
commit
1eb4cec44e
3729
pnpm-lock.yaml
Normal file
3729
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
61
src/api/carousel/index.ts
Normal file
61
src/api/carousel/index.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import request from '/@/utils/request';
|
||||
import { baseUrlHost } from '../baseUrlHost';
|
||||
|
||||
/**
|
||||
* （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
|
||||
* 注意在写get请求时，参数是params，而不是data，要标注好
|
||||
*
|
||||
* 登录api接口集合
|
||||
* @method getBannerList 分页查询轮播图
|
||||
* @method addBanner 添加轮播图
|
||||
* @method getBannerDetail 获取轮播图详情
|
||||
* @method updateBanner 更新轮播图
|
||||
* @method deleteBanner 删除轮播图
|
||||
* @method uploadFile 上传轮播图
|
||||
*/
|
||||
|
||||
export function bannerApi() {
|
||||
return {
|
||||
getBannerList: (params: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpBanner',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
},
|
||||
addBanner: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpBanner',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
},
|
||||
getBannerDetail: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/cpBanner/${id}`,
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
updateBanner: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpBanner',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
},
|
||||
deleteBanner: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/cpBanner/${id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
},
|
||||
uploadFile: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/enAttachment/upload',
|
||||
method: 'post',
|
||||
data,
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
61
src/api/clients/index.ts
Normal file
61
src/api/clients/index.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import request from '/@/utils/request';
|
||||
import { baseUrlHost } from '../baseUrlHost';
|
||||
|
||||
/**
|
||||
* （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
|
||||
* 注意在写get请求时，参数是params，而不是data，要标注好
|
||||
*
|
||||
* 登录api接口集合
|
||||
* @method getClientsList 分页查询客户
|
||||
* @method addClients 添加客户
|
||||
* @method getClientsDetail 获取客户详情
|
||||
* @method updateClients 更新客户
|
||||
* @method deleteClients 删除客户
|
||||
* @method uploadFile 上传客户
|
||||
*/
|
||||
|
||||
export function clientsApi() {
|
||||
return {
|
||||
getClientsList: (params: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/mbUser',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
},
|
||||
addClients: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpClients',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
},
|
||||
getClientsDetail: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/cpClients/${id}`,
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
updateClients: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpClients',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
},
|
||||
deleteClients: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/cpClients/${id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
},
|
||||
uploadFile: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/enAttachment/upload',
|
||||
method: 'post',
|
||||
data,
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
75
src/api/photos/index.ts
Normal file
75
src/api/photos/index.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import request from '/@/utils/request';
|
||||
import { baseUrlHost } from '../baseUrlHost';
|
||||
|
||||
/**
|
||||
* （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
|
||||
* 注意在写get请求时，参数是params，而不是data，要标注好
|
||||
*
|
||||
* 登录api接口集合
|
||||
* @method getModuleList 获取模块列表
|
||||
* @method getLabelList 获取标签列表
|
||||
* @method getPhotosList 分页查询图片
|
||||
* @method addPhotos 添加图片
|
||||
* @method getPhotosDetail 获取图片详情
|
||||
* @method updatePhotos 更新图片
|
||||
* @method deletePhotos 删除图片
|
||||
* @method uploadFile 上传图片
|
||||
*/
|
||||
|
||||
export function photosApi() {
|
||||
return {
|
||||
getModuleList: () => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpModule/all',
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
getLabelList: (moduleid: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/cpLabel/moduleid/${moduleid}`,
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
getPhotosList: (params: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpPhoto',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
},
|
||||
addPhotos: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpPhoto',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
},
|
||||
getPhotosDetail: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/cpPhoto/${id}`,
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
updatePhotos: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/cpPhoto',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
},
|
||||
deletePhotos: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/cpPhoto/${id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
},
|
||||
uploadFile: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/enAttachment/upload',
|
||||
method: 'post',
|
||||
data,
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -11,6 +11,9 @@ export default {
|
||||
systemDept: '部门管理',
|
||||
systemDic: '字典管理',
|
||||
article: '文章管理',
|
||||
carousel: '轮播图管理',
|
||||
clients: '客户管理',
|
||||
photos: '图片管理',
|
||||
message: '留言管理',
|
||||
order: '订单管理',
|
||||
statistics: '统计分析',
|
||||
@ -27,7 +30,7 @@ export default {
|
||||
editAttachment: '编辑附件',
|
||||
messagePush: '站内消息推送',
|
||||
messagePushDetail: '站内消息推送详情',
|
||||
log:'系统日志',
|
||||
log: '系统日志',
|
||||
limits: '权限管理',
|
||||
limitsFrontEnd: '前端控制',
|
||||
limitsFrontEndPage: '页面权限',
|
||||
|
||||
@ -117,7 +117,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-icon-',
|
||||
@ -214,7 +214,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
},
|
||||
@ -229,7 +229,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
},
|
||||
@ -244,12 +244,60 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
// 轮播图管理
|
||||
{
|
||||
path: '/carousel',
|
||||
name: 'carousel',
|
||||
component: () => import('/@/views/carousel/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.carousel',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-DocumentCopy',
|
||||
},
|
||||
},
|
||||
// 图片管理
|
||||
{
|
||||
path: '/photos',
|
||||
name: 'photos',
|
||||
component: () => import('/@/views/photos/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.photos',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Picture',
|
||||
},
|
||||
},
|
||||
// 客户管理
|
||||
{
|
||||
path: '/clients',
|
||||
name: 'clients',
|
||||
component: () => import('/@/views/clients/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.clients',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-User',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/message',
|
||||
name: 'message',
|
||||
@ -292,7 +340,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-shuju',
|
||||
icon: 'iconfont icon-shuju',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -307,7 +355,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-ico_shuju',
|
||||
icon: 'iconfont icon-ico_shuju',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -336,7 +384,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
},
|
||||
@ -351,7 +399,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
},
|
||||
@ -366,7 +414,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
}
|
||||
@ -398,7 +446,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
},
|
||||
@ -413,7 +461,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
},
|
||||
@ -428,7 +476,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
}
|
||||
@ -460,7 +508,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin','common'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'ele-Document',
|
||||
},
|
||||
},
|
||||
|
||||
490
src/views/carousel/index.vue
Normal file
490
src/views/carousel/index.vue
Normal file
@ -0,0 +1,490 @@
|
||||
<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-input size="default" placeholder="请输入" v-model="state.tableData.param.name" class="ml10" style="max-width: 250px;margin-right: 20px;"> </el-input>
|
||||
<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%">
|
||||
<el-table-column prop="name" label="轮播图名称" show-overflow-tooltip width="350px"></el-table-column>
|
||||
<el-table-column label="跳转链接" show-overflow-tooltip width="350px" align="center">
|
||||
<template #default="scope">
|
||||
<a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序号" sortable show-overflow-tooltip width="350px" align="center"></el-table-column>
|
||||
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="350px" 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)">编辑</el-button>
|
||||
<el-button size="small" text type="primary" @click="deleteBanner(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 新增或编辑弹窗 -->
|
||||
<el-drawer
|
||||
v-model="dialog"
|
||||
:title="flag?'新增轮播图':'编辑轮播图'"
|
||||
@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="100px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
:label-position="labelPosition"
|
||||
status-icon
|
||||
v-loading="state.formData.loading"
|
||||
>
|
||||
<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-dialog v-model="dialogVisible">
|
||||
<img :src="dialogImageUrl" style="width: 100%" alt="Preview Image" />
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转链接:" prop="path">
|
||||
<el-input v-model="state.formData.path" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号:" prop="orderNum">
|
||||
<el-input v-model.number="state.formData.orderNum" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="submitForm(flag)" :loading="loading" style="margin-right: 30px;">
|
||||
{{ loading ? '保存 ...' : '保存' }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="cancelForm">取消</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="articleIndex">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElDrawer, ElMessage, ElMessageBox, TableColumnCtx } from 'element-plus';
|
||||
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
|
||||
import type { ComponentSize, FormInstance, FormRules, UploadFile, UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { baseUrlHost } from '../../api/baseUrlHost';
|
||||
import { bannerApi } from '/@/api/carousel';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 数据
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
name:'',
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
},
|
||||
formData: {
|
||||
fileList: [],
|
||||
name:"",
|
||||
path:"",
|
||||
orderNum: "",
|
||||
loading: false
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
fileList: [
|
||||
{ required: true, message: '请选择图片', trigger: 'blur' }
|
||||
],
|
||||
orderNum: [
|
||||
{ required: true, message: '请输入排序号', trigger: 'blur' },
|
||||
{ type: 'number', message: '排序号必须是数字' },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
// #region
|
||||
|
||||
// 引入 api 请求接口
|
||||
const banApi = bannerApi();
|
||||
|
||||
// 获取表格数据
|
||||
const getTableData = async() => {
|
||||
try {
|
||||
state.tableData.loading = true;
|
||||
let res = await banApi.getBannerList(state.tableData.param);
|
||||
console.log(res);
|
||||
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 = {
|
||||
name: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
}
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 图片基本路径
|
||||
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);
|
||||
return `${newPath}`;
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
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 labelPosition = ref<FormProps['labelPosition']>('Left')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const uploadDisabled = ref(false)
|
||||
|
||||
|
||||
const switchDrawer = async (id: number, staus) => {
|
||||
console.log("switchDrawer",id,state.formData,state.formData.fileList);
|
||||
dialog.value = true;
|
||||
if (staus == 1) {
|
||||
flag.value = false;
|
||||
state.formData.loading = true;
|
||||
let res = await banApi.getBannerDetail(id)
|
||||
console.log("res",res.data.path);
|
||||
if (res?.success) {
|
||||
state.formData.fileList.push({ url: jpgFormatter(res.data) });
|
||||
// console.log("state.formData.fileList",state.formData);
|
||||
Object.assign(state.formData, res.data);
|
||||
// console.log("state.formData",state.formData);
|
||||
state.formData.path = jpgFormatter(res.data);
|
||||
uploadDisabled.value = true;
|
||||
state.formData.loading = false;
|
||||
console.log("state.formData",state.formData);
|
||||
} else {
|
||||
ElMessage.error('获取轮播图详情失败！')
|
||||
state.formData.loading = false;
|
||||
}
|
||||
} else {
|
||||
flag.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') {
|
||||
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();
|
||||
formdata.append('file', file.raw);
|
||||
let res = await banApi.uploadFile(formdata);
|
||||
console.log("result", res);
|
||||
console.log("state.formData", state.formData);
|
||||
if(res?.success){
|
||||
state.formData.url = jpgFormatter(res);
|
||||
state.formData.path = jpgFormatter(res);
|
||||
ElMessage({
|
||||
message: '图片上传成功！',
|
||||
type: 'success',
|
||||
})
|
||||
state.formData.loading = false;
|
||||
}else{
|
||||
ElMessage.error('图片上传失败！');
|
||||
}
|
||||
} catch (error) {
|
||||
state.formData.loading = false;
|
||||
console.log(error);
|
||||
|
||||
ElMessage.error('图片上传失败！');
|
||||
}
|
||||
} else {
|
||||
ElMessageBox.alert('轮播图的格式不正确，请重新选择！', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
})
|
||||
console.log("handleChange3",uploadFiles);
|
||||
uploadFiles.pop()
|
||||
console.log("handleChange4",uploadFiles);
|
||||
uploadDisabled.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 handleRemove = (file: UploadFile, uploadFiles) => {
|
||||
console.log("handleRemove1",file);
|
||||
console.log("handleRemove2",uploadFiles);
|
||||
uploadRef.value.clearFiles();
|
||||
state.formData.path = "";
|
||||
console.log("handleRemove3",uploadFiles);
|
||||
uploadDisabled.value = false;
|
||||
|
||||
}
|
||||
// 删除轮播图
|
||||
const deleteBanner = (id: number) => {
|
||||
console.log("删除",id);
|
||||
ElMessageBox.confirm('确定要删除该轮播图吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async() => {
|
||||
try {
|
||||
state.tableData.loading = true;
|
||||
let res = await banApi.deleteBanner(id);
|
||||
if(res?.success){
|
||||
await getTableData();
|
||||
ElMessage.success('轮播图删除成功！');
|
||||
} else ElMessage.error('轮播图删除失败！');
|
||||
} catch(e) {
|
||||
ElMessage.error('删除失败！');
|
||||
} finally {
|
||||
state.tableData.loading = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '删除取消',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
//保存
|
||||
const submitForm = (decision) => {
|
||||
ruleFormRef.value?.validate(async(valid: boolean) => {
|
||||
if (valid) {
|
||||
if (decision) {
|
||||
console.log("新增新增新增");
|
||||
loading.value = true;
|
||||
const form = { ...state.formData };
|
||||
console.log('submitForm', form);
|
||||
try {
|
||||
let res = await banApi.addBanner(form);
|
||||
console.log("submitFormREs", res);
|
||||
if(res?.success){
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
})
|
||||
loading.value = false;
|
||||
getTableData();
|
||||
dialog.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error('保存失败！');
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
console.log("编辑编辑编辑");
|
||||
const form = { ...state.formData };
|
||||
console.log('submitForm', form);
|
||||
try {
|
||||
let res = await banApi.updateBanner(form);
|
||||
console.log("submitFormREs", res);
|
||||
if(res?.success){
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
})
|
||||
loading.value = false;
|
||||
getTableData();
|
||||
dialog.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error('保存失败！');
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
ElMessage.error('请填写必要信息！');
|
||||
loading.value = false;
|
||||
// dialog.value = false
|
||||
// loading.value = false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
const resetForm = () => {
|
||||
ruleFormRef.value?.resetFields();
|
||||
// state.formData.fileList.pop();
|
||||
uploadDisabled.value = false;
|
||||
}
|
||||
|
||||
//取消
|
||||
const cancelForm = () => {
|
||||
dialog.value = false;
|
||||
resetForm();
|
||||
console.log(state);
|
||||
|
||||
}
|
||||
// #endregion
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
})
|
||||
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
::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;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
346
src/views/clients/index.vue
Normal file
346
src/views/clients/index.vue
Normal file
@ -0,0 +1,346 @@
|
||||
<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-input size="default" placeholder="请输入" v-model="state.tableData.param.phone" class="ml10" style="max-width: 250px;margin-right: 20px;"> </el-input>
|
||||
<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="pushMessages" size="default" type="primary" class="ml10" :disabled="btnDisabled">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
消息推送
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" :selectable="selectable" width="55" />
|
||||
<el-table-column prop="account" label="账户" show-overflow-tooltip width="255px"align="center"></el-table-column>
|
||||
<el-table-column prop="nickName" label="昵称" show-overflow-tooltip width="255px" align="center"></el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" show-overflow-tooltip width="255px" align="center"></el-table-column>
|
||||
<el-table-column prop="registerTime" label="注册时间" :formatter="dateFormatter" show-overflow-tooltip width="255px" align="center"></el-table-column>
|
||||
<el-table-column prop="state" label="状态" show-overflow-tooltip width="255px" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="350px" align="center">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" :disabled="scope.row.enable?true:false" @click="scope.row.enable=!scope.row.enable">启用</el-button>
|
||||
<el-button size="small" text type="primary" :disabled="scope.row.enable?false:true" @click="scope.row.enable=!scope.row.enable">禁用</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 新增或编辑弹窗 -->
|
||||
<el-drawer
|
||||
v-model="dialog"
|
||||
title="消息推送"
|
||||
@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="100px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
:label-position="labelPosition"
|
||||
status-icon
|
||||
v-loading="state.formData.loading"
|
||||
>
|
||||
<el-form-item label="用户:" prop="userList">
|
||||
<el-select
|
||||
v-model="users"
|
||||
multiple
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in state.formData.userList"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:selected="true"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题:" prop="title">
|
||||
<el-input v-model="state.formData.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="内容:" prop="content">
|
||||
<el-mention
|
||||
v-model="state.formData.content"
|
||||
type="textarea"
|
||||
:options="options"
|
||||
placeholder="请输入..."
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="submitForm" :loading="loading" style="margin-right: 30px;" >
|
||||
{{ loading ? '推送 ...' : '推送' }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="cancelForm">取消</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="articleIndex">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElDrawer, ElMessage, ElMessageBox, TableColumnCtx } from 'element-plus';
|
||||
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
|
||||
import type { ComponentSize, FormInstance, FormRules, UploadFile, UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { baseUrlHost } from '../../api/baseUrlHost';
|
||||
import { clientsApi } from '/@/api/clients';
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: 'Fuphoenixes',
|
||||
value: 'Fuphoenixes',
|
||||
},
|
||||
{
|
||||
label: 'kooriookami',
|
||||
value: 'kooriookami',
|
||||
}
|
||||
]
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 数据
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
phone:'',
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
},
|
||||
formData: {
|
||||
nickName:'',
|
||||
title:'',
|
||||
content: '',
|
||||
userList:[],
|
||||
loading: false
|
||||
},
|
||||
rules: {
|
||||
userList: [
|
||||
{ required: true, message: '请选择用户', trigger: 'blur' }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: '请输入标题', trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
// #region
|
||||
|
||||
// 引入 api 请求接口
|
||||
const clientApi = clientsApi();
|
||||
|
||||
// 获取表格数据
|
||||
const getTableData = async() => {
|
||||
try {
|
||||
state.tableData.loading = true;
|
||||
let res = await clientApi.getClientsList(state.tableData.param);
|
||||
console.log(res);
|
||||
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 btnDisabled = ref(true)
|
||||
const userList = ref([])
|
||||
|
||||
const handleSelectionChange = (val: User[]) => {
|
||||
console.log("多选.....", val);
|
||||
userList.value = val;
|
||||
console.log("多选.....", userList.value.length);
|
||||
if (userList.value.length) {
|
||||
btnDisabled.value = false;
|
||||
console.log("多选11111", btnDisabled.value);
|
||||
} else {
|
||||
btnDisabled.value = true;
|
||||
console.log("多选22222", btnDisabled.value);
|
||||
}
|
||||
}
|
||||
|
||||
const enable = ref(true);
|
||||
|
||||
const switchState = (scope,staus) => {
|
||||
console.log("switchState11",scope);
|
||||
console.log("switchState22", staus);
|
||||
scope = staus;
|
||||
|
||||
}
|
||||
// 重置
|
||||
const reset = () =>{
|
||||
state.tableData.param = {
|
||||
name: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
}
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
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 users = ref([])
|
||||
|
||||
const formSize = ref<ComponentSize>('large')
|
||||
const labelPosition = ref<FormProps['labelPosition']>('Left')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
||||
|
||||
const pushMessages = async () => {
|
||||
console.log("pushMessages", userList.value);
|
||||
state.formData.userList = userList.value.map((item) => {
|
||||
return {
|
||||
value: item.account,
|
||||
label: item.account,
|
||||
};
|
||||
})
|
||||
state.formData.userList.forEach((item) => {
|
||||
users.value.push(item.value);
|
||||
})
|
||||
dialog.value = true;
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
//推送
|
||||
const submitForm = () => {
|
||||
ruleFormRef.value?.validate(async(valid: boolean) => {
|
||||
if (valid) {
|
||||
console.log("推送推送推送推送");
|
||||
}else{
|
||||
ElMessage.error('请填写必要信息！');
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
const resetForm = () => {
|
||||
ruleFormRef.value?.resetFields();
|
||||
state.formData.userList = [];
|
||||
users.value = [];
|
||||
}
|
||||
|
||||
//取消
|
||||
const cancelForm = () => {
|
||||
dialog.value = false;
|
||||
resetForm();
|
||||
console.log(state);
|
||||
|
||||
}
|
||||
// #endregion
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
})
|
||||
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
::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 125px!important;
|
||||
}
|
||||
|
||||
::v-deep .disabled{
|
||||
.el-upload--picture-card{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner{
|
||||
min-height: 200px!important;
|
||||
}
|
||||
</style>
|
||||
571
src/views/photos/index.vue
Normal file
571
src/views/photos/index.vue
Normal file
@ -0,0 +1,571 @@
|
||||
<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 @change="handleChangeModule" size="default" v-model="state.tableData.param.moduleName" placeholder="请选择" clearable style="max-width: 180px;margin:0 10px;">
|
||||
<el-option
|
||||
:data-op="item.id" v-for="(item,index) in moduleList"
|
||||
:key="index"
|
||||
:label="item.moduleName"
|
||||
:value="item.moduleName">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<span>标签:</span>
|
||||
<el-select size="default" v-model="state.tableData.param.labelName" placeholder="请选择" 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-option>
|
||||
</el-select>
|
||||
<span>名称:</span>
|
||||
<el-input size="default" placeholder="请输入" v-model="state.tableData.param.name" class="ml10" style="max-width: 250px;margin-right: 20px;"> </el-input>
|
||||
<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%">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="图片名称" show-overflow-tooltip width="250px"></el-table-column>
|
||||
<el-table-column prop="moduleName" label="模块" show-overflow-tooltip width="250px" align="center"></el-table-column>
|
||||
<el-table-column prop="labelName" label="标签" show-overflow-tooltip width="250px" align="center"></el-table-column>
|
||||
<el-table-column prop="uploadName" label="上传者" show-overflow-tooltip width="250px" align="center"></el-table-column>
|
||||
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="350px" 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(2,scope.row.id)">查看</el-button>
|
||||
<el-button size="small" text type="primary" @click="switchDrawer(1,scope.row.id)">编辑</el-button>
|
||||
<el-button size="small" text type="primary" @click="deleteBanner(scope.row.id)">删除</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="100px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
status-icon
|
||||
v-loading="state.formData.loading"
|
||||
:disabled="isForbidden"
|
||||
>
|
||||
<el-form-item label="模块:" prop="moduleName">
|
||||
<el-select @change="handleChangeModule" size="default" v-model="state.formData.moduleName" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
:data-op="item.id" v-for="(item,index) in moduleList"
|
||||
:key="index"
|
||||
:label="item.moduleName"
|
||||
:value="item.moduleName">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签:" prop="labelName">
|
||||
<el-select size="default" v-model="state.formData.labelName" placeholder="请选择" clearable >
|
||||
<el-option
|
||||
v-for="(item,index) in labelList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</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-dialog v-model="dialogVisible">
|
||||
<img :src="dialogImageUrl" style="width: 100%" alt="Preview Image" />
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</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="articleIndex">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElDrawer, ElMessage, ElMessageBox, TableColumnCtx, timePickerDefaultProps } from 'element-plus';
|
||||
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
|
||||
import type { ComponentSize, FormInstance, FormRules, UploadFile, UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { baseUrlHost } from '../../api/baseUrlHost';
|
||||
import { photosApi } from '/@/api/photos';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 数据
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
labelName: '',
|
||||
moduleName: '',
|
||||
name:'',
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
},
|
||||
formData: {
|
||||
labelName: '',
|
||||
moduleName: '',
|
||||
fileList: [],
|
||||
name:"",
|
||||
loading: false
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
fileList: [
|
||||
{ required: true, message: '请选择图片', trigger: 'blur' }
|
||||
],
|
||||
moduleName: [
|
||||
{ required: true, message: '请选择模块', trigger: 'blur' },
|
||||
],
|
||||
labelName: [
|
||||
{ required: true, message: '请选择标签', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
// 引入 api 请求接口
|
||||
const photoApi = photosApi();
|
||||
|
||||
// 模块列表
|
||||
const moduleList = ref([]);
|
||||
|
||||
const getModuleList = async() => {
|
||||
try {
|
||||
let res = await photoApi.getModuleList();
|
||||
if(res?.success){
|
||||
moduleList.value = res.data;
|
||||
}else{
|
||||
ElMessage.error('模块列表获取失败！');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('模块列表获取失败！');
|
||||
} finally {
|
||||
}
|
||||
}
|
||||
|
||||
// 标签列表
|
||||
const labelList = ref([]);
|
||||
|
||||
// 模块选择
|
||||
const handleChangeModule = async(val: any) => {
|
||||
try {
|
||||
state.tableData.param.labelName = '';
|
||||
state.formData.labelName = '';
|
||||
if(!val){labelList.value=[]; return;}
|
||||
const op:any = event?.currentTarget;
|
||||
let res = await photoApi.getLabelList(op.dataset.op);
|
||||
if(res?.success){
|
||||
labelList.value = res.data;
|
||||
}else{
|
||||
ElMessage.error('标签列表获取失败！');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('标签列表获取失败！');
|
||||
} finally {
|
||||
}
|
||||
}
|
||||
|
||||
// #region
|
||||
|
||||
// 获取表格数据
|
||||
const getTableData = async() => {
|
||||
try {
|
||||
state.tableData.loading = true;
|
||||
let res = await photoApi.getPhotosList(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 = {
|
||||
name: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
}
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 图片基本路径
|
||||
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);
|
||||
return `${newPath}`;
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
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 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 getPhotoDetail = async (id: number) => {
|
||||
state.formData.loading = true;
|
||||
let res = await photoApi.getPhotosDetail(id)
|
||||
if (res?.success) {
|
||||
state.formData.fileList.push({ url: jpgFormatter(res) });
|
||||
Object.assign(state.formData, res.data);
|
||||
state.formData.path = res.data.path;
|
||||
uploadDisabled.value = true;
|
||||
state.formData.loading = false;
|
||||
} else {
|
||||
ElMessage.error('获取图片详情失败！')
|
||||
state.formData.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
const isForbidden = ref(false)
|
||||
|
||||
// 切换右侧边栏
|
||||
const switchDrawer = async (staus,id: number) => {
|
||||
if (staus == 1) {
|
||||
flag.value = false;
|
||||
isHide.value = true;
|
||||
disabled.value = false;
|
||||
getPhotoDetail(id);
|
||||
} else if (staus == 2) {
|
||||
isForbidden.value = true;
|
||||
isHide.value = false;
|
||||
disabled.value = true;
|
||||
getPhotoDetail(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') {
|
||||
state.formData.fileList = uploadFiles;
|
||||
uploadDisabled.value = true;
|
||||
try {
|
||||
const formdata = new FormData();
|
||||
formdata.append('file', file.raw);
|
||||
let res = await photoApi.uploadFile(formdata);
|
||||
if(res?.success){
|
||||
state.formData.url = jpgFormatter(res);
|
||||
state.formData.path = res.data.path;
|
||||
ElMessage({
|
||||
message: '图片上传成功！',
|
||||
type: 'success',
|
||||
})
|
||||
state.formData.loading = false;
|
||||
}else{
|
||||
ElMessage.error('图片上传失败！');
|
||||
}
|
||||
} catch (error) {
|
||||
state.formData.loading = false;
|
||||
console.log(error);
|
||||
|
||||
ElMessage.error('图片上传失败！');
|
||||
}
|
||||
} else {
|
||||
ElMessageBox.alert('图片的格式不正确，请重新选择！', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
})
|
||||
console.log("handleChange3",uploadFiles);
|
||||
uploadFiles.pop()
|
||||
console.log("handleChange4",uploadFiles);
|
||||
uploadDisabled.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 handleRemove = (file: UploadFile, uploadFiles) => {
|
||||
uploadRef.value.clearFiles();
|
||||
state.formData.path = "";
|
||||
uploadDisabled.value = false;
|
||||
|
||||
}
|
||||
// 删除图片
|
||||
const deleteBanner = (id: number) => {
|
||||
ElMessageBox.confirm('确定要删除该图片吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async() => {
|
||||
try {
|
||||
state.tableData.loading = true;
|
||||
let res = await photoApi.deletePhotos(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) => {
|
||||
ruleFormRef.value?.validate(async(valid: boolean) => {
|
||||
if (valid) {
|
||||
if (decision) {
|
||||
console.log("新增新增新增");
|
||||
loading.value = true;
|
||||
const form = { ...state.formData };
|
||||
try {
|
||||
let res = await photoApi.addPhotos(form);
|
||||
if(res?.success){
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
})
|
||||
loading.value = false;
|
||||
getTableData();
|
||||
dialog.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error('保存失败！');
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
console.log("编辑编辑编辑");
|
||||
const form = { ...state.formData };
|
||||
try {
|
||||
let res = await photoApi.updatePhotos(form);
|
||||
if(res?.success){
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
})
|
||||
loading.value = false;
|
||||
getTableData();
|
||||
dialog.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error('保存失败！');
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
ElMessage.error('请填写必要信息！');
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 表单重置和取消
|
||||
const resetForm = () => {
|
||||
dialog.value = false;
|
||||
ruleFormRef.value?.resetFields();
|
||||
state.formData.fileList.pop();
|
||||
uploadDisabled.value = false;
|
||||
isForbidden.value = false;
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getModuleList();
|
||||
})
|
||||
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
::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