Skip to content

V
vue-kwan-admin

Kwan的解忧杂货铺@新空间代码工作室 / vue-kwan-admin

通知 38
Star 6
Fork 3
V
vue-kwan-admin
提交 fba18bd0 编写于 作者: Kwan的解忧杂货铺@新空间代码工作室's avatar Kwan的解忧杂货铺@新空间代码工作室 🐭
浏览文件
操作

整理

上级 ed9d2f7e
展开全部 隐藏空白更改
内联 并排
Showing with 198 addition and 122 deletion
dist/css/app.5832e3b4.css → dist/css/app.2f46528a.css
浏览文件 @ fba18bd0
.login-container[data-v-bca4874e]{background-color:#35495e;height:100%}.login-container .login-box[data-v-bca4874e]{width:400px;height:250px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px hsla(0,0%,100%,.5)}.login-container .login-box .form-login[data-v-bca4874e]{position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box}.form-control[data-v-bca4874e]{flex:1}.avatar-box[data-v-bca4874e]{position:absolute;width:100%;top:-65px;left:0}.avatar-box .avatar[data-v-bca4874e]{width:120px;height:120px;border-radius:50%!important;box-shadow:0 0 6px #efefef}.layout-header-left-img[data-v-898eb31a]{height:50px}.layout-aside-container[data-v-3dfef034]{width:200px;height:100%;border-right:1px solid #eaeaea}.left-aside-item[data-v-3dfef034]{font-size:20px}.el-main{padding:20px 3px!important}.el-header[data-v-7a6b7a25]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-7a6b7a25]{color:#333}.pagination[data-v-7a6b7a25]{margin-top:16px;text-align:right}.arrow-button[data-v-7a6b7a25]{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;cursor:pointer}.custom-icon[data-v-7a6b7a25]{font-size:24px;color:#f90;margin-right:6px}.arrow-button.disabled[data-v-7a6b7a25]{pointer-events:none;opacity:.1}.el-header[data-v-1755a7d8]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-1755a7d8]{color:#333}.pagination[data-v-1755a7d8]{margin-top:16px;text-align:right}.header-button-item[data-v-1755a7d8]{margin-right:15px;font-size:20px}.backtop[data-v-1755a7d8]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.backtop[data-v-1755a7d8]:hover{background-color:#0050a0}.el-header[data-v-a05e897a]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-a05e897a]{color:#333}.pagination[data-v-a05e897a]{margin-top:16px;text-align:right}.header-button-item[data-v-a05e897a]{margin-right:15px;font-size:20px}.red-title[data-v-a05e897a]{line-height:24px;font-size:18px;color:red}.backtop[data-v-a05e897a]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-a05e897a]{width:100%;text-align:left}.backtop[data-v-a05e897a]:hover{background-color:#0050a0}.el-header[data-v-277bc25c]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-277bc25c]{color:#333}.pagination[data-v-277bc25c]{margin-top:16px;text-align:right}.header-button-item[data-v-277bc25c]{margin-right:15px;font-size:20px}.red-title[data-v-277bc25c]{line-height:24px;font-size:18px;color:red}.backtop[data-v-277bc25c]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-277bc25c]{width:100%;text-align:left}.backtop[data-v-277bc25c]:hover{background-color:#0050a0}.el-header[data-v-7f9d4b2f]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-7f9d4b2f]{color:#333}.pagination[data-v-7f9d4b2f]{margin-top:16px;text-align:right}.header-button-item[data-v-7f9d4b2f]{margin-right:15px;font-size:20px}.red-title[data-v-7f9d4b2f]{line-height:24px;font-size:18px;color:red}.backtop[data-v-7f9d4b2f]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-7f9d4b2f]{width:100%;text-align:left}.backtop[data-v-7f9d4b2f]:hover{background-color:#0050a0}.el-header[data-v-55b17565]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-55b17565]{color:#333}.pagination[data-v-55b17565]{margin-top:16px;text-align:right}.header-button-item[data-v-55b17565]{margin-right:15px;font-size:20px}.red-title[data-v-55b17565]{line-height:24px;font-size:18px;color:red}.backtop[data-v-55b17565]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-55b17565]{width:100%;text-align:left}.backtop[data-v-55b17565]:hover{background-color:#0050a0}.el-header[data-v-cbe27112]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-cbe27112]{color:#333}.pagination[data-v-cbe27112]{margin-top:16px;text-align:right}.header-button-item[data-v-cbe27112]{margin-right:15px;font-size:20px}.red-title[data-v-cbe27112]{line-height:24px;font-size:18px;color:red}.backtop[data-v-cbe27112]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-cbe27112]{width:100%;text-align:left}.backtop[data-v-cbe27112]:hover{background-color:#0050a0}.el-header[data-v-33b199a6]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-33b199a6]{color:#333}.pagination[data-v-33b199a6]{margin-top:16px;text-align:right}.header-button-item[data-v-33b199a6]{margin-right:15px;font-size:20px}.red-title[data-v-33b199a6]{line-height:24px;font-size:18px;color:red}.backtop[data-v-33b199a6]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-33b199a6]{width:100%;text-align:left}.backtop[data-v-33b199a6]:hover{background-color:#0050a0}.el-header[data-v-54aa1839]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-54aa1839]{color:#333}.pagination[data-v-54aa1839]{margin-top:16px;text-align:right}.header-button-item[data-v-54aa1839]{margin-right:15px;font-size:20px}.red-title[data-v-54aa1839]{line-height:24px;font-size:18px;color:red}.backtop[data-v-54aa1839]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-54aa1839]{width:100%;text-align:left}.backtop[data-v-54aa1839]:hover{background-color:#0050a0}.el-header[data-v-dfde6c48]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-dfde6c48]{color:#333}.pagination[data-v-dfde6c48]{margin-top:16px;text-align:right}.header-button-item[data-v-dfde6c48]{margin-right:15px;font-size:20px}.red-title[data-v-dfde6c48]{line-height:24px;font-size:18px;color:red}.backtop[data-v-dfde6c48]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-dfde6c48]{width:100%;text-align:left}.backtop[data-v-dfde6c48]:hover{background-color:#0050a0}.el-header[data-v-09fd22aa]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-09fd22aa]{color:#333}.pagination[data-v-09fd22aa]{margin-top:16px;text-align:right}.header-button-item[data-v-09fd22aa]{margin-right:15px;font-size:20px}.red-title[data-v-09fd22aa]{line-height:24px;font-size:18px;color:red}.backtop[data-v-09fd22aa]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-09fd22aa]{width:100%;text-align:left}.backtop[data-v-09fd22aa]:hover{background-color:#0050a0}.button-container[data-v-4ba2a316],.button-container[data-v-6f0d75be]{position:fixed;bottom:0;right:0;margin:16px}.container[data-v-19e0b810]{display:flex;justify-content:center;align-items:center;height:30vh} .login-container[data-v-bca4874e]{background-color:#35495e;height:100%}.login-container .login-box[data-v-bca4874e]{width:400px;height:250px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px hsla(0,0%,100%,.5)}.login-container .login-box .form-login[data-v-bca4874e]{position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box}.form-control[data-v-bca4874e]{flex:1}.avatar-box[data-v-bca4874e]{position:absolute;width:100%;top:-65px;left:0}.avatar-box .avatar[data-v-bca4874e]{width:120px;height:120px;border-radius:50%!important;box-shadow:0 0 6px #efefef}.layout-header-left-img[data-v-898eb31a]{height:50px}.layout-aside-container[data-v-3dfef034]{width:200px;height:100%;border-right:1px solid #eaeaea}.left-aside-item[data-v-3dfef034]{font-size:20px}.el-main{padding:20px 3px!important}.el-header[data-v-5fb794ef]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-5fb794ef]{color:#333}.pagination[data-v-5fb794ef]{margin-top:16px;text-align:right}.arrow-button[data-v-5fb794ef]{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;cursor:pointer}.custom-icon[data-v-5fb794ef]{font-size:24px;color:#f90;margin-right:6px}.arrow-button.disabled[data-v-5fb794ef]{pointer-events:none;opacity:.1}.el-header[data-v-1755a7d8]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-1755a7d8]{color:#333}.pagination[data-v-1755a7d8]{margin-top:16px;text-align:right}.header-button-item[data-v-1755a7d8]{margin-right:15px;font-size:20px}.backtop[data-v-1755a7d8]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.backtop[data-v-1755a7d8]:hover{background-color:#0050a0}.el-header[data-v-a05e897a]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-a05e897a]{color:#333}.pagination[data-v-a05e897a]{margin-top:16px;text-align:right}.header-button-item[data-v-a05e897a]{margin-right:15px;font-size:20px}.red-title[data-v-a05e897a]{line-height:24px;font-size:18px;color:red}.backtop[data-v-a05e897a]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-a05e897a]{width:100%;text-align:left}.backtop[data-v-a05e897a]:hover{background-color:#0050a0}.el-header[data-v-277bc25c]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-277bc25c]{color:#333}.pagination[data-v-277bc25c]{margin-top:16px;text-align:right}.header-button-item[data-v-277bc25c]{margin-right:15px;font-size:20px}.red-title[data-v-277bc25c]{line-height:24px;font-size:18px;color:red}.backtop[data-v-277bc25c]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-277bc25c]{width:100%;text-align:left}.backtop[data-v-277bc25c]:hover{background-color:#0050a0}.el-header[data-v-7f9d4b2f]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-7f9d4b2f]{color:#333}.pagination[data-v-7f9d4b2f]{margin-top:16px;text-align:right}.header-button-item[data-v-7f9d4b2f]{margin-right:15px;font-size:20px}.red-title[data-v-7f9d4b2f]{line-height:24px;font-size:18px;color:red}.backtop[data-v-7f9d4b2f]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-7f9d4b2f]{width:100%;text-align:left}.backtop[data-v-7f9d4b2f]:hover{background-color:#0050a0}.el-header[data-v-55b17565]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-55b17565]{color:#333}.pagination[data-v-55b17565]{margin-top:16px;text-align:right}.header-button-item[data-v-55b17565]{margin-right:15px;font-size:20px}.red-title[data-v-55b17565]{line-height:24px;font-size:18px;color:red}.backtop[data-v-55b17565]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-55b17565]{width:100%;text-align:left}.backtop[data-v-55b17565]:hover{background-color:#0050a0}.el-header[data-v-cbe27112]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-cbe27112]{color:#333}.pagination[data-v-cbe27112]{margin-top:16px;text-align:right}.header-button-item[data-v-cbe27112]{margin-right:15px;font-size:20px}.red-title[data-v-cbe27112]{line-height:24px;font-size:18px;color:red}.backtop[data-v-cbe27112]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-cbe27112]{width:100%;text-align:left}.backtop[data-v-cbe27112]:hover{background-color:#0050a0}.el-header[data-v-33b199a6]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-33b199a6]{color:#333}.pagination[data-v-33b199a6]{margin-top:16px;text-align:right}.header-button-item[data-v-33b199a6]{margin-right:15px;font-size:20px}.red-title[data-v-33b199a6]{line-height:24px;font-size:18px;color:red}.backtop[data-v-33b199a6]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-33b199a6]{width:100%;text-align:left}.backtop[data-v-33b199a6]:hover{background-color:#0050a0}.el-header[data-v-54aa1839]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-54aa1839]{color:#333}.pagination[data-v-54aa1839]{margin-top:16px;text-align:right}.header-button-item[data-v-54aa1839]{margin-right:15px;font-size:20px}.red-title[data-v-54aa1839]{line-height:24px;font-size:18px;color:red}.backtop[data-v-54aa1839]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-54aa1839]{width:100%;text-align:left}.backtop[data-v-54aa1839]:hover{background-color:#0050a0}.el-header[data-v-dfde6c48]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-dfde6c48]{color:#333}.pagination[data-v-dfde6c48]{margin-top:16px;text-align:right}.header-button-item[data-v-dfde6c48]{margin-right:15px;font-size:20px}.red-title[data-v-dfde6c48]{line-height:24px;font-size:18px;color:red}.backtop[data-v-dfde6c48]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-dfde6c48]{width:100%;text-align:left}.backtop[data-v-dfde6c48]:hover{background-color:#0050a0}.el-header[data-v-09fd22aa]{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside[data-v-09fd22aa]{color:#333}.pagination[data-v-09fd22aa]{margin-top:16px;text-align:right}.header-button-item[data-v-09fd22aa]{margin-right:15px;font-size:20px}.red-title[data-v-09fd22aa]{line-height:24px;font-size:18px;color:red}.backtop[data-v-09fd22aa]{position:fixed;bottom:50px;right:50px;height:40px;width:40px;line-height:40px;text-align:center;border-radius:20px;background-color:#007aff;color:#fff;cursor:pointer;z-index:999}.custom-textarea[data-v-09fd22aa]{width:100%;text-align:left}.backtop[data-v-09fd22aa]:hover{background-color:#0050a0}.button-container[data-v-4ba2a316],.button-container[data-v-6f0d75be]{position:fixed;bottom:0;right:0;margin:16px}.container[data-v-19e0b810]{display:flex;justify-content:center;align-items:center;height:30vh}
/*! /*!
* Bootstrap v4.5.0 (https://getbootstrap.com/) * Bootstrap v4.5.0 (https://getbootstrap.com/)
......
dist/index.html
浏览文件 @ fba18bd0
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/kwan.png"><title>kwan</title><link href="/css/app.5832e3b4.css" rel="preload" as="style"><link href="/css/chunk-vendors.0bfa23eb.css" rel="preload" as="style"><link href="/js/app.77518857.js" rel="preload" as="script"><link href="/js/chunk-vendors.02cd1fa9.js" rel="preload" as="script"><link href="/css/chunk-vendors.0bfa23eb.css" rel="stylesheet"><link href="/css/app.5832e3b4.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but kwan doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.02cd1fa9.js"></script><script src="/js/app.77518857.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/kwan.png"><title>kwan</title><link href="/css/app.2f46528a.css" rel="preload" as="style"><link href="/css/chunk-vendors.0bfa23eb.css" rel="preload" as="style"><link href="/js/app.c74a1dd0.js" rel="preload" as="script"><link href="/js/chunk-vendors.02cd1fa9.js" rel="preload" as="script"><link href="/css/chunk-vendors.0bfa23eb.css" rel="stylesheet"><link href="/css/app.2f46528a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but kwan doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.02cd1fa9.js"></script><script src="/js/app.c74a1dd0.js"></script></body></html>
\ No newline at end of file \ No newline at end of file
dist/js/app.77518857.js 已删除 100644 → 0
浏览文件 @ ed9d2f7e
此差异已折叠。
dist/js/app.77518857.js.map 已删除 100644 → 0
浏览文件 @ ed9d2f7e
此差异已折叠。
dist/js/app.c74a1dd0.js 0 → 100644
浏览文件 @ fba18bd0
此差异已折叠。
dist/js/app.c74a1dd0.js.map 0 → 100644
浏览文件 @ fba18bd0
此差异已折叠。
src/api/ApiService.js
浏览文件 @ fba18bd0
...@@ -95,5 +95,11 @@ const ApiService = { ...@@ -95,5 +95,11 @@ const ApiService = {
}, },
}) })
}, },
async editPicConfirm(currentRowId, type) {
return await axios.post('http://43.139.90.182:8888/picInfo/update', {
id: currentRowId,
type: type,
})
},
} }
export default ApiService export default ApiService
src/components/menus/MyPic.vue
浏览文件 @ fba18bd0
...@@ -20,18 +20,41 @@ ...@@ -20,18 +20,41 @@
</el-form> </el-form>
<el-table border :data="picList" v-loading="loading"> <el-table border :data="picList" v-loading="loading">
<el-table-column prop="id" label="序号" width="100" sortable></el-table-column> <el-table-column prop="id" label="序号" align="center" sortable></el-table-column>
<el-table-column prop="picName" label="图片名字" width="240" show-overflow-tooltip></el-table-column> <el-table-column prop="picName" label="图片名字" align="center" show-overflow-tooltip></el-table-column>
<el-table-column align="center"> <el-table-column align="center">
<template slot-scope="props"> <template slot-scope="props">
<img :src="props.row.picUrl" alt="图片" height="100px" @click="showImageDialog(props.row.picUrl, props.$index)" style="cursor: pointer" /> <img :src="props.row.picUrl" alt="图片" height="100px" @click="showImageDialog(props.row.picUrl, props.$index)" style="cursor: pointer" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" width="170"> <el-table-column label="创建时间" align="center">
<template slot-scope="props"> <template slot-scope="props">
{{ props.row.createTime | dateFormat }} {{ props.row.createTime | dateFormat }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="操作" label="操作" width="100px" align="center">
<template slot-scope="props">
<el-button size="small" type="primary" @click.prevent="prePicEdit(props.row.id, props.row.picUrl, props.row.type)">编辑</el-button>
<el-dialog title="编辑图片信息" :visible.sync="editPicVisible">
<el-form :model="form" class="custom-form">
<el-form-item align="center" class="form-item">
<img :src="form.picUrl" alt="图片" height="100px" style="cursor: pointer" />
</el-form-item>
<el-form-item label="" class="form-item" align="middle">
<el-select v-model="form.type" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editPicVisible = false">取 消</el-button>
<el-button type="primary" @click="editPicConfirm">确 定</el-button>
</div>
</el-dialog>
</template>
</el-table-column>
</el-table> </el-table>
<el-dialog :visible.sync="imageDialogVisible" width="30%"> <el-dialog :visible.sync="imageDialogVisible" width="30%">
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
...@@ -44,8 +67,7 @@ ...@@ -44,8 +67,7 @@
</button> </button>
</div> </div>
</el-dialog> </el-dialog>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[8, 10, 50, 100, 200, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
<el-pagination class="pagination" background :key="elementui_page_component_key" :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
</el-main> </el-main>
</el-container> </el-container>
</div> </div>
...@@ -55,113 +77,161 @@ ...@@ -55,113 +77,161 @@
import axios from 'axios' import axios from 'axios'
import ApiService from '../../api/ApiService' import ApiService from '../../api/ApiService'
export default { export default {
name: 'MyPic', name: 'MyPic',
data() { data() {
return { return {
formInline: { form: {
picType: 0, picUrl: '',
}, type: 0,
//待上传的图片 },
fileList: [], formInline: {
fileName:[], picType: 0,
// 用户列表数据 },
picList: [], //待上传的图片
loading: false, fileList: [],
elementui_page_component_key: 0, // 用户列表数据
currentPage: 1, picList: [],
pageSize: 6, loading: false,
total: 0, elementui_page_component_key: 0,
imageDialogVisible: false, currentPage: 1,
addPicVisible: false, pageSize: 6,
enlargedImageUrl: '', total: 0,
imageIndex: 0, // 当前展示的图片索引 imageDialogVisible: false,
options: [ addPicVisible: false,
{ editPicVisible: false,
value: 0, enlargedImageUrl: '',
label: '宝宝照片', currentRowId: null,
}, imageIndex: 0, // 当前展示的图片索引
{ options: [
value: 1, {
label: '学习照片', value: 0,
}, label: '宝宝',
{ },
value: 2, {
label: '风景照片', value: 1,
}, label: '学习',
{ },
value: 3, {
label: '美女照片', value: 2,
}, label: '风景',
{ },
value: 99, {
label: '其他照片', value: 3,
}, label: '美女',
], },
picType: 0, {
} value: 4,
}, label: '猫咪',
created() { },
// 调用请求数据的方法 {
this.queryPic() value: 5,
}, label: '素材',
methods: { },
async submitUpload() { {
this.$refs.upload.submit() value: 6,
this.addPicVisible = false label: '动漫',
}, },
handleRemove(file, fileList) { {
console.log(file, fileList) value: 99,
}, label: '其他',
handlePreview(file) { },
console.log(file) ],
}, picType: 0,
prepareAddPic() { }
this.addPicVisible = true },
}, created() {
handleUploadSuccess(response, file, fileList) { // 调用请求数据的方法
if (response.success) { this.queryPic()
setTimeout(() => { },
this.queryPic() methods: {
}, 1000) async submitUpload() {
} else { this.$refs.upload.submit()
this.$message.error('Upload failed') this.addPicVisible = false
} },
}, handleRemove(file, fileList) {
showBeforeImage() { console.log(file, fileList)
if (this.imageIndex > 0) { },
// 增加索引以显示下一张图片 handlePreview(file) {
this.imageIndex-- console.log(file)
this.enlargedImageUrl = this.picList[this.imageIndex].picUrl },
this.imageDialogVisible = true // 打开对话框展示图片 prepareAddPic() {
} this.addPicVisible = true
}, },
showNextImage() { prePicEdit(id, picUrl, type) {
if (this.imageIndex < this.picList.length - 1) { this.currentRowId = id
// 增加索引以显示下一张图片 this.form.picUrl = picUrl
this.imageIndex++ this.form.type = type
this.enlargedImageUrl = this.picList[this.imageIndex].picUrl this.editPicVisible = true
this.imageDialogVisible = true },
} handleUploadSuccess(response, file, fileList) {
}, if (response.success) {
showImageDialog(url, index) { setTimeout(() => {
this.enlargedImageUrl = url this.queryPic()
this.imageDialogVisible = true }, 1000)
this.imageIndex = index } else {
}, this.$message.error('Upload failed')
async queryPic() { }
this.loading = true },
const { data: res } = await ApiService.queryPic(this.currentPage, this.pageSize, this.picType) showBeforeImage() {
if (res.code === 200) { if (this.imageIndex > 0) {
this.picList = res.result.records // 增加索引以显示下一张图片
this.total = res.result.total this.imageIndex--
} this.enlargedImageUrl = this.picList[this.imageIndex].picUrl
this.loading = false this.imageDialogVisible = true // 打开对话框展示图片
}, }
handleCurrentChange(currentPage) { },
this.currentPage = currentPage showNextImage() {
this.queryPic() if (this.imageIndex < this.picList.length - 1) {
}, // 增加索引以显示下一张图片
}, this.imageIndex++
this.enlargedImageUrl = this.picList[this.imageIndex].picUrl
this.imageDialogVisible = true
}
},
showImageDialog(url, index) {
this.enlargedImageUrl = url
this.imageDialogVisible = true
this.imageIndex = index
},
async queryPic() {
this.loading = true
const { data: res } = await ApiService.queryPic(this.currentPage, this.pageSize, this.picType)
if (res.code === 200) {
this.picList = res.result.records
this.total = res.result.total
}
this.loading = false
},
async editPicConfirm() {
try {
this.loading = true
this.editPicVisible = false
const { data: res } = await ApiService.editPicConfirm(this.currentRowId, this.form.type)
if (res.code === 200) {
this.form.type = 0
this.form.picUrl = null
this.currentRowId = null
this.queryPic()
} else {
console.error('Received non-200 status code', res)
}
} catch (error) {
console.error('An error occurred while adding the questionName:', error)
// 异常处理逻辑
} finally {
this.loading = false
}
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this.queryPic()
},
handleSizeChange(currentSize) {
this.pageSize = currentSize
this.queryPic()
},
},
} }
</script> </script>
...@@ -191,13 +261,13 @@ export default { ...@@ -191,13 +261,13 @@ export default {
} }
.custom-icon { .custom-icon {
font-size: 24px; /* 调整图标大小 */ font-size: 24px;
color: #ff9900; /* 调整图标颜色 */ color: #ff9900;
margin-right: 6px; /* 调整图标与文字之间的间距 */ margin-right: 6px;
} }
.arrow-button.disabled { .arrow-button.disabled {
pointer-events: none; /* 禁用点击事件 */ pointer-events: none;
opacity: 0.1; /* 添加透明度来表示禁用状态 */ opacity: 0.1;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或