chenzihao/sac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: chenzihao:ca_router
Branches Tags
chenzihao:ca_router
chenzihao:sac_ca_router_merge_test
chenzihao:sac_ca_router_merge_test_1
chenzihao:chenzihao-patch-1
..
compare: chenzihao:chenzihao-patch-1
Branches Tags
chenzihao:ca_router
chenzihao:sac_ca_router_merge_test
chenzihao:sac_ca_router_merge_test_1
chenzihao:chenzihao-patch-1

No commits in common. "ca_router" and "chenzihao-patch-1" have entirely different histories.
ca_router ... chenzihao-

226 changed files with 17363 additions and 22688 deletions
Show Stats Expand all files Collapse all files

1
pom.xml
View File

@ -28,7 +28,6 @@
<velocity.version>2.3</velocity.version> <velocity.version>2.3</velocity.version>
<jwt.version>0.9.1</jwt.version> <jwt.version>0.9.1</jwt.version>
<hutool.version>5.8.22</hutool.version> <hutool.version>5.8.22</hutool.version>
<pagehelper.boot.version>1.4.6</pagehelper.boot.version>
</properties> </properties>
<!-- 依赖声明 --> <!-- 依赖声明 -->

1
sf-admin/src/main/resources/application.yml
View File

@ -151,5 +151,4 @@ sac:
# port: 5566 # port: 5566
host: 192.168.1.23 host: 192.168.1.23
port: 1775 port: 1775
url_pre: /gateway

12
sf-common/pom.xml
View File

@ -26,12 +26,6 @@
<artifactId>commons-fileupload</artifactId> <artifactId>commons-fileupload</artifactId>
<version>1.4</version> <version>1.4</version>
</dependency> </dependency>
<!-- pagehelper 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pagehelper.boot.version}</version>
</dependency>
<!-- Spring框架基本的核心工具 --> <!-- Spring框架基本的核心工具 -->
<dependency> <dependency>
<groupId>org.springframework</groupId> <groupId>org.springframework</groupId>
@ -50,16 +44,10 @@
<artifactId>spring-boot-starter-security</artifactId> <artifactId>spring-boot-starter-security</artifactId>
</dependency> </dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.9</version>
</dependency>
<!-- pagehelper 分页插件 --> <!-- pagehelper 分页插件 -->
<dependency> <dependency>
<groupId>com.github.pagehelper</groupId> <groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId> <artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pagehelper.boot.version}</version>
</dependency> </dependency>
<!-- 自定义验证注解 --> <!-- 自定义验证注解 -->

22
sf-framework/pom.xml
View File

@ -77,33 +77,13 @@
<groupId>io.springfox</groupId> <groupId>io.springfox</groupId>
<artifactId>springfox-boot-starter</artifactId> <artifactId>springfox-boot-starter</artifactId>
</dependency> </dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.16</version>
</dependency>
<!-- 防止进入swagger页面报类型转换错误，排除3.0.0中的引用，手动增加1.6.2版本 --> <!-- 防止进入swagger页面报类型转换错误，排除3.0.0中的引用，手动增加1.6.2版本 -->
<dependency> <dependency>
<groupId>io.swagger</groupId> <groupId>io.swagger</groupId>
<artifactId>swagger-models</artifactId> <artifactId>swagger-models</artifactId>
<version>1.6.2</version> <version>1.6.2</version>
</dependency> </dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.9</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>2.1.2</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-autoconfigure</artifactId>
<version>2.3.2</version>
</dependency>
</dependencies> </dependencies>
</project> </project>

28
sf-framework/src/main/java/com/sf/apijson/config/ApijsonInitUtil.java
View File

@ -78,20 +78,20 @@ public class ApijsonInitUtil {
GenTableColumnServiceImpl genTableColumnService = SpringUtils.getBean("genTableColumnServiceImpl", GenTableColumnServiceImpl.class); GenTableColumnServiceImpl genTableColumnService = SpringUtils.getBean("genTableColumnServiceImpl", GenTableColumnServiceImpl.class);
int pageNum = 1; int pageNum = 1;
// while (true) { while (true) {
// PageHelper.startPage(pageNum, 50, "table_id"); PageHelper.startPage(pageNum, 50, "table_id");
// GenTable genTableSearch = new GenTable(); GenTable genTableSearch = new GenTable();
// List<GenTable> list = genTableService.selectGenTableList(genTableSearch); List<GenTable> list = genTableService.selectGenTableList(genTableSearch);
// if (list.size() == 0) { if (list.size() == 0) {
// break; break;
// } }
// for (GenTable genTable : list) { for (GenTable genTable : list) {
// // 查询表字段 // 查询表字段
// List<GenTableColumn> listColumn = genTableColumnService.selectGenTableColumnListByTableId(genTable.getTableId()); List<GenTableColumn> listColumn = genTableColumnService.selectGenTableColumnListByTableId(genTable.getTableId());
// initConfigTableUserId(genTable.getTableName(), genTable.getUserId() , listColumn); initConfigTableUserId(genTable.getTableName(), genTable.getUserId() , listColumn);
// } }
// pageNum++; pageNum++;
// } }
} }
public static void deleteTablePkConfig(String tableName) { public static void deleteTablePkConfig(String tableName) {

5
sf-service/src/main/java/com/sf/service/gateway/service/impl/GatewayConfigServiceImpl.java
View File

@ -47,9 +47,6 @@ public class GatewayConfigServiceImpl implements IGatewayConfigService {
@Value("${sac.gateway.port:5566}") @Value("${sac.gateway.port:5566}")
private Integer sacGatewayPort; private Integer sacGatewayPort;
@Value("${sac.gateway.url_pre:}")
private String urlPre;
private static final String SYNC_CONFIG_PATH = "/vertx/app/config"; private static final String SYNC_CONFIG_PATH = "/vertx/app/config";
private static final Long DEFAULT_API_TIMEOUT = 3000L; private static final Long DEFAULT_API_TIMEOUT = 3000L;
@ -104,7 +101,7 @@ public class GatewayConfigServiceImpl implements IGatewayConfigService {
public void synchronization(String appCode) { public void synchronization(String appCode) {
Assert.hasText(sacGatewayHost, "网关地址未配置"); Assert.hasText(sacGatewayHost, "网关地址未配置");
Assert.notNull(sacGatewayPort, "网关端口未配置"); Assert.notNull(sacGatewayPort, "网关端口未配置");
String urlStr = "http://" + sacGatewayHost + ":" + sacGatewayPort + urlPre + SYNC_CONFIG_PATH; String urlStr = "http://" + sacGatewayHost + ":" + sacGatewayPort + SYNC_CONFIG_PATH;
AppConfig appConfig = new AppConfig(); AppConfig appConfig = new AppConfig();
appConfig.setAppCode(appCode); appConfig.setAppCode(appCode);
GatewayConfig gatewayConfig = selectGatewayConfigByAppCode(appCode); GatewayConfig gatewayConfig = selectGatewayConfigByAppCode(appCode);

5
sf-system/pom.xml
View File

@ -26,11 +26,6 @@
<groupId>com.smarterFramework</groupId> <groupId>com.smarterFramework</groupId>
<artifactId>sf-file</artifactId> <artifactId>sf-file</artifactId>
</dependency> </dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.16</version>
</dependency>
</dependencies> </dependencies>

2
sf-ui/Dockerfile
View File

@ -1,7 +1,7 @@
FROM node:24-alpine AS builder FROM node:24-alpine AS builder
WORKDIR /app WORKDIR /app
COPY . . COPY . .
ENV NODE_OPTIONS=--openssl-legacy-provider
RUN npm install --registry=https://registry.npmmirror.com && npm run build:stage RUN npm install --registry=https://registry.npmmirror.com && npm run build:stage
FROM registry.zsmarter.com/public/nginx:1.22.1 FROM registry.zsmarter.com/public/nginx:1.22.1

70
sf-ui/build/index.js
View File

@ -1,35 +1,35 @@
const { run } = require('runjs') const { run } = require('runjs')
const chalk = require('chalk') const chalk = require('chalk')
const config = require('../vue.config.js') const config = require('../vue.config.js')
const rawArgv = process.argv.slice(2) const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ') const args = rawArgv.join(' ')
if (process.env.npm_config_preview || rawArgv.includes('--preview')) { if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
const report = rawArgv.includes('--report') const report = rawArgv.includes('--report')
run(`vue-cli-service build ${args}`) run(`vue-cli-service build ${args}`)
const port = 9526 const port = 9526
const publicPath = config.publicPath const publicPath = config.publicPath
var connect = require('connect') var connect = require('connect')
var serveStatic = require('serve-static') var serveStatic = require('serve-static')
const app = connect() const app = connect()
app.use( app.use(
publicPath, publicPath,
serveStatic('./dist', { serveStatic('./dist', {
index: ['index.html', '/'] index: ['index.html', '/']
}) })
) )
app.listen(port, function () { app.listen(port, function () {
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`)) console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
if (report) { if (report) {
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`)) console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
} }
}) })
} else { } else {
run(`vue-cli-service build ${args}`) run(`vue-cli-service build ${args}`)
} }

9
sf-ui/nginx.conf
View File

@ -1,3 +1,4 @@
worker_processes 1; worker_processes 1;
events { events {
@ -28,6 +29,14 @@ http {
rewrite ^.*$ /index.html last; rewrite ^.*$ /index.html last;
} }
location /stage-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://zt-sac-java:7781/;
}
error_page 500 502 503 504 /50x.html; error_page 500 502 503 504 /50x.html;
location = /50x.html { location = /50x.html {
root html; root html;

BIN
sf-ui/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

90
sf-ui/public/html/ie.html
View File

File diff suppressed because one or more lines are too long

416
sf-ui/public/index.html
View File

@ -1,208 +1,208 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style> <style>
html, html,
body, body,
#app { #app {
height: 100%; height: 100%;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
.chromeframe { .chromeframe {
margin: 0.2em 0; margin: 0.2em 0;
background: #ccc; background: #ccc;
color: #000; color: #000;
padding: 0.2em 0; padding: 0.2em 0;
} }
#loader-wrapper { #loader-wrapper {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 999999; z-index: 999999;
} }
#loader { #loader {
display: block; display: block;
position: relative; position: relative;
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 150px; width: 150px;
height: 150px; height: 150px;
margin: -75px 0 0 -75px; margin: -75px 0 0 -75px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
z-index: 1001; z-index: 1001;
} }
#loader:before { #loader:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite; -webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite; -ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite; animation: spin 3s linear infinite;
} }
#loader:after { #loader:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 15px; left: 15px;
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite; -webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;
} }
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg); -ms-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg); -ms-transform: rotate(360deg);
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes spin { @keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg); -ms-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg); -ms-transform: rotate(360deg);
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
#loader-wrapper .loader-section { #loader-wrapper .loader-section {
position: fixed; position: fixed;
top: 0; top: 0;
width: 51%; width: 51%;
height: 100%; height: 100%;
background: #7171C6; background: #7171C6;
z-index: 1000; z-index: 1000;
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
-ms-transform: translateX(0); -ms-transform: translateX(0);
transform: translateX(0); transform: translateX(0);
} }
#loader-wrapper .loader-section.section-left { #loader-wrapper .loader-section.section-left {
left: 0; left: 0;
} }
#loader-wrapper .loader-section.section-right { #loader-wrapper .loader-section.section-right {
right: 0; right: 0;
} }
.loaded #loader-wrapper .loader-section.section-left { .loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); -webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%); -ms-transform: translateX(-100%);
transform: translateX(-100%); transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
} }
.loaded #loader-wrapper .loader-section.section-right { .loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); -webkit-transform: translateX(100%);
-ms-transform: translateX(100%); -ms-transform: translateX(100%);
transform: translateX(100%); transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
} }
.loaded #loader { .loaded #loader {
opacity: 0; opacity: 0;
-webkit-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.loaded #loader-wrapper { .loaded #loader-wrapper {
visibility: hidden; visibility: hidden;
-webkit-transform: translateY(-100%); -webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%); -ms-transform: translateY(-100%);
transform: translateY(-100%); transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out; -webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out;
} }
.no-js #loader-wrapper { .no-js #loader-wrapper {
display: none; display: none;
} }
.no-js h1 { .no-js h1 {
color: #222222; color: #222222;
} }
#loader-wrapper .load_title { #loader-wrapper .load_title {
font-family: 'Open Sans'; font-family: 'Open Sans';
color: #FFF; color: #FFF;
font-size: 19px; font-size: 19px;
width: 100%; width: 100%;
text-align: center; text-align: center;
z-index: 9999999999999; z-index: 9999999999999;
position: absolute; position: absolute;
top: 60%; top: 60%;
opacity: 1; opacity: 1;
line-height: 30px; line-height: 30px;
} }
#loader-wrapper .load_title span { #loader-wrapper .load_title span {
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
font-size: 13px; font-size: 13px;
color: #FFF; color: #FFF;
opacity: 0.5; opacity: 0.5;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="loader"></div> <div id="loader"></div>
<div class="loader-section section-left"></div> <div class="loader-section section-left"></div>
<div class="loader-section section-right"></div> <div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div> <div class="load_title">正在加载系统资源，请耐心等待</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

2
sf-ui/public/robots.txt
View File

@ -1,2 +1,2 @@
User-agent: * User-agent: *
Disallow: / Disallow: /

56
sf-ui/src/App.vue
View File

@ -1,28 +1,28 @@
<template> <template>
<div id="app"> <div id="app">
<router-view /> <router-view />
<theme-picker /> <theme-picker />
</div> </div>
</template> </template>
<script> <script>
import ThemePicker from "@/components/ThemePicker"; import ThemePicker from "@/components/ThemePicker";
export default { export default {
name: "App", name: "App",
components: { ThemePicker }, components: { ThemePicker },
metaInfo() { metaInfo() {
return { return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title, title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
titleTemplate: title => { titleTemplate: title => {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
} }
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
#app .theme-picker { #app .theme-picker {
display: none; display: none;
} }
</style> </style>

69
sf-ui/src/api/FDS/whiteList.js
View File

@ -42,72 +42,3 @@ export function delWhitelist (id) {
method: 'delete' method: 'delete'
}) })
} }
// 查询白名单成员列列表
export function listWhitelistMember (query) {
return request({
url: '/deployment/whitelistMember/list',
method: 'get',
params: query
})
}
// 查询白名单成员列详细
export function getWhitelistMember (id) {
return request({
url: '/deployment/whitelistMember/' + id,
method: 'get'
})
}
// 新增白名单成员列
export function addWhitelistMember (data) {
return request({
url: '/deployment/whitelistMember',
method: 'post',
data: data
})
}
// 修改白名单成员列
export function updateWhitelistMember (data) {
return request({
url: '/deployment/whitelistMember',
method: 'put',
data: data
})
}
// 删除白名单成员列
export function delWhitelistMember (id) {
return request({
url: '/deployment/whitelistMember/' + id,
method: 'delete'
})
}
// 发布白名单
export function publishWhitelist (id) {
return request({
url: '/deployment/whitelist/publish/' + id,
method: 'get',
})
}
// 下架白名单
export function soldOutWhitelist (id) {
return request({
url: '/deployment/whitelist/sold/out/' + id,
method: 'get',
})
}
// 批量上传白名单
export function importWhitelist (data) {
return request({
url: 'deployment/whitelistMember/batch/import',
method: 'post',
data: data
})
}

88
sf-ui/src/api/forms/api/gen/Logback1692261745000.js
View File

@ -1,44 +1,44 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询日志列表 // 查询日志列表
export function listLogback1692261745000(query) { export function listLogback1692261745000(query) {
return request({ return request({
url: '/forms/api/gen/Logback1692261745000/list', url: '/forms/api/gen/Logback1692261745000/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询日志详细 // 查询日志详细
export function getLogback1692261745000(id) { export function getLogback1692261745000(id) {
return request({ return request({
url: '/forms/api/gen/Logback1692261745000/' + id, url: '/forms/api/gen/Logback1692261745000/' + id,
method: 'get' method: 'get'
}) })
} }
// 新增日志 // 新增日志
export function addLogback1692261745000(data) { export function addLogback1692261745000(data) {
return request({ return request({
url: '/forms/api/gen/Logback1692261745000', url: '/forms/api/gen/Logback1692261745000',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改日志 // 修改日志
export function updateLogback1692261745000(data) { export function updateLogback1692261745000(data) {
return request({ return request({
url: '/forms/api/gen/Logback1692261745000', url: '/forms/api/gen/Logback1692261745000',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除日志 // 删除日志
export function delLogback1692261745000(id) { export function delLogback1692261745000(id) {
return request({ return request({
url: '/forms/api/gen/Logback1692261745000/' + id, url: '/forms/api/gen/Logback1692261745000/' + id,
method: 'delete' method: 'delete'
}) })
} }

88
sf-ui/src/api/forms/api/gen/Logback1708504771000.js
View File

@ -1,44 +1,44 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询岗位信息3列表 // 查询岗位信息3列表
export function listLogback1708504771000(query) { export function listLogback1708504771000(query) {
return request({ return request({
url: '/forms/api/gen/Logback1708504771000/list', url: '/forms/api/gen/Logback1708504771000/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询岗位信息3详细 // 查询岗位信息3详细
export function getLogback1708504771000(id) { export function getLogback1708504771000(id) {
return request({ return request({
url: '/forms/api/gen/Logback1708504771000/' + id, url: '/forms/api/gen/Logback1708504771000/' + id,
method: 'get' method: 'get'
}) })
} }
// 新增岗位信息3 // 新增岗位信息3
export function addLogback1708504771000(data) { export function addLogback1708504771000(data) {
return request({ return request({
url: '/forms/api/gen/Logback1708504771000', url: '/forms/api/gen/Logback1708504771000',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改岗位信息3 // 修改岗位信息3
export function updateLogback1708504771000(data) { export function updateLogback1708504771000(data) {
return request({ return request({
url: '/forms/api/gen/Logback1708504771000', url: '/forms/api/gen/Logback1708504771000',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除岗位信息3 // 删除岗位信息3
export function delLogback1708504771000(id) { export function delLogback1708504771000(id) {
return request({ return request({
url: '/forms/api/gen/Logback1708504771000/' + id, url: '/forms/api/gen/Logback1708504771000/' + id,
method: 'delete' method: 'delete'
}) })
} }

88
sf-ui/src/api/forms/api/gen/Ordermaster1692279150000.js
View File

@ -1,45 +1,45 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询订单列表 // 查询订单列表
export function listOrdermaster1692279150000(query) { export function listOrdermaster1692279150000(query) {
return request({ return request({
url: '/forms/api/gen/Ordermaster1692279150000/list', url: '/forms/api/gen/Ordermaster1692279150000/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询订单详细 // 查询订单详细
export function getOrdermaster1692279150000(orderNo) { export function getOrdermaster1692279150000(orderNo) {
return request({ return request({
url: '/forms/api/gen/Ordermaster1692279150000/' + orderNo, url: '/forms/api/gen/Ordermaster1692279150000/' + orderNo,
method: 'get' method: 'get'
}) })
} }
// 新增订单 // 新增订单
export function addOrdermaster1692279150000(data) { export function addOrdermaster1692279150000(data) {
return request({ return request({
url: '/forms/api/gen/Ordermaster1692279150000', url: '/forms/api/gen/Ordermaster1692279150000',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改订单 // 修改订单
export function updateOrdermaster1692279150000(data) { export function updateOrdermaster1692279150000(data) {
return request({ return request({
url: '/forms/api/gen/Ordermaster1692279150000', url: '/forms/api/gen/Ordermaster1692279150000',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除订单 // 删除订单
export function delOrdermaster1692279150000(orderNo) { export function delOrdermaster1692279150000(orderNo) {
return request({ return request({
url: '/forms/api/gen/Ordermaster1692279150000/' + orderNo, url: '/forms/api/gen/Ordermaster1692279150000/' + orderNo,
method: 'delete' method: 'delete'
}) })
} }

88
sf-ui/src/api/forms/api/gen/Post1692343037000.js
View File

@ -1,44 +1,44 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询岗位信息列表 // 查询岗位信息列表
export function listPost1692343037000(query) { export function listPost1692343037000(query) {
return request({ return request({
url: '/forms/api/gen/Post1692343037000/list', url: '/forms/api/gen/Post1692343037000/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询岗位信息详细 // 查询岗位信息详细
export function getPost1692343037000(postId) { export function getPost1692343037000(postId) {
return request({ return request({
url: '/forms/api/gen/Post1692343037000/' + postId, url: '/forms/api/gen/Post1692343037000/' + postId,
method: 'get' method: 'get'
}) })
} }
// 新增岗位信息 // 新增岗位信息
export function addPost1692343037000(data) { export function addPost1692343037000(data) {
return request({ return request({
url: '/forms/api/gen/Post1692343037000', url: '/forms/api/gen/Post1692343037000',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改岗位信息 // 修改岗位信息
export function updatePost1692343037000(data) { export function updatePost1692343037000(data) {
return request({ return request({
url: '/forms/api/gen/Post1692343037000', url: '/forms/api/gen/Post1692343037000',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除岗位信息 // 删除岗位信息
export function delPost1692343037000(postId) { export function delPost1692343037000(postId) {
return request({ return request({
url: '/forms/api/gen/Post1692343037000/' + postId, url: '/forms/api/gen/Post1692343037000/' + postId,
method: 'delete' method: 'delete'
}) })
} }

28
sf-ui/src/api/gateway/config.js
View File

@ -1,28 +0,0 @@
import request from '@/utils/request'
// 查询网关配置信息
export function getGatewayConfig(params) {
return request({
url: '/gateway/config',
method: 'get',
params
})
}
// 更新网关配置
export function updateGatewayConfig(data) {
return request({
url: '/gateway/config',
method: 'put',
data
})
}
// 同步网关配置
export function updateGatewaySync(data) {
return request({
url: '/gateway/config/sync',
method: 'post',
data
})
}

9
sf-ui/src/api/gateway/route.js
View File

@ -42,12 +42,3 @@ export function delRoute(id) {
method: 'delete' method: 'delete'
}) })
} }
// 查询可绑定的路由列表（不分页）
export function getBindableList(params) {
return request({
url: '/gateway/route/bindableList',
method: 'get',
params
})
}

9
sf-ui/src/api/gateway/server.js
View File

@ -51,12 +51,3 @@ export function changeServerStatus(data) {
data: data data: data
}) })
} }
// 查询可绑定的服务列表（状态为启用的,不分页）
export function bindableServerList(params) {
return request({
url: '/gateway/server/bindableList',
method: 'get',
params
})
}

9
sf-ui/src/api/gateway/strategy.js
View File

@ -50,13 +50,4 @@ export function changeStrategyStatus(data) {
method: 'put', method: 'put',
data: data data: data
}) })
}
// 查询可绑定的策略列表（状态为启用的,不分页）
export function bindableStrategyList(params) {
return request({
url: '/gateway/strategy/bindableList',
method: 'get',
params
})
} }

116
sf-ui/src/api/login.js
View File

@ -1,59 +1,59 @@
import request from '@/utils/request' import request from '@/utils/request'
// 登录方法 // 登录方法
export function login(username, password, code, uuid) { export function login(username, password, code, uuid) {
const data = { const data = {
username, username,
password, password,
code, code,
uuid uuid
} }
return request({ return request({
url: '/login', url: '/login',
headers: { headers: {
isToken: false isToken: false
}, },
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 注册方法 // 注册方法
export function register(data) { export function register(data) {
return request({ return request({
url: '/register', url: '/register',
headers: { headers: {
isToken: false isToken: false
}, },
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 获取用户详细信息 // 获取用户详细信息
export function getInfo() { export function getInfo() {
return request({ return request({
url: '/getInfo', url: '/getInfo',
method: 'get' method: 'get'
}) })
} }
// 退出方法 // 退出方法
export function logout() { export function logout() {
return request({ return request({
url: '/logout', url: '/logout',
method: 'post' method: 'post'
}) })
} }
// 获取验证码 // 获取验证码
export function getCodeImg() { export function getCodeImg() {
return request({ return request({
url: '/captchaImage', url: '/captchaImage',
headers: { headers: {
isToken: false isToken: false
}, },
method: 'get', method: 'get',
timeout: 20000 timeout: 20000
}) })
} }

66
sf-ui/src/api/mandate/appMandate.js
View File

@ -1,66 +0,0 @@
import request from '@/utils/request'
// 查询应用授权列表
export function listAppMandate (query) {
return request({
url: '/mandate/appMandate/list',
method: 'get',
params: query
})
}
// 查询应用授权详细
export function getAppMandate (id) {
return request({
url: '/mandate/appMandate/' + id,
method: 'get'
})
}
// 新增应用授权
export function addAppMandate (data) {
return request({
url: '/mandate/appMandate',
method: 'post',
data: data
})
}
// 新增应用授权批量
export function addAppMandateList (data) {
return request({
url: '/mandate/appMandate/addList',
method: 'post',
data: data
})
}
// 修改应用授权
export function updateAppMandate (data) {
return request({
url: '/mandate/appMandate',
method: 'put',
data: data
})
}
// 删除应用授权
export function delAppMandate (id) {
return request({
url: '/mandate/appMandate/' + id,
method: 'delete'
})
}
// 查询应用授权列表
export function appMandateUser () {
return request({
url: '/mandate/appMandate/queryUser',
method: 'get',
})
}

16
sf-ui/src/api/menu.js
View File

@ -1,9 +1,9 @@
import request from '@/utils/request' import request from '@/utils/request'
// 获取路由 // 获取路由
export const getRouters = () => { export const getRouters = () => {
return request({ return request({
url: '/getRouters', url: '/getRouters',
method: 'get' method: 'get'
}) })
} }

114
sf-ui/src/api/monitor/cache.js
View File

@ -1,57 +1,57 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询缓存详细 // 查询缓存详细
export function getCache() { export function getCache() {
return request({ return request({
url: '/monitor/cache', url: '/monitor/cache',
method: 'get' method: 'get'
}) })
} }
// 查询缓存名称列表 // 查询缓存名称列表
export function listCacheName() { export function listCacheName() {
return request({ return request({
url: '/monitor/cache/getNames', url: '/monitor/cache/getNames',
method: 'get' method: 'get'
}) })
} }
// 查询缓存键名列表 // 查询缓存键名列表
export function listCacheKey(cacheName) { export function listCacheKey(cacheName) {
return request({ return request({
url: '/monitor/cache/getKeys/' + cacheName, url: '/monitor/cache/getKeys/' + cacheName,
method: 'get' method: 'get'
}) })
} }
// 查询缓存内容 // 查询缓存内容
export function getCacheValue(cacheName, cacheKey) { export function getCacheValue(cacheName, cacheKey) {
return request({ return request({
url: '/monitor/cache/getValue/' + cacheName + '/' + cacheKey, url: '/monitor/cache/getValue/' + cacheName + '/' + cacheKey,
method: 'get' method: 'get'
}) })
} }
// 清理指定名称缓存 // 清理指定名称缓存
export function clearCacheName(cacheName) { export function clearCacheName(cacheName) {
return request({ return request({
url: '/monitor/cache/clearCacheName/' + cacheName, url: '/monitor/cache/clearCacheName/' + cacheName,
method: 'delete' method: 'delete'
}) })
} }
// 清理指定键名缓存 // 清理指定键名缓存
export function clearCacheKey(cacheKey) { export function clearCacheKey(cacheKey) {
return request({ return request({
url: '/monitor/cache/clearCacheKey/' + cacheKey, url: '/monitor/cache/clearCacheKey/' + cacheKey,
method: 'delete' method: 'delete'
}) })
} }
// 清理全部缓存 // 清理全部缓存
export function clearCacheAll() { export function clearCacheAll() {
return request({ return request({
url: '/monitor/cache/clearCacheAll', url: '/monitor/cache/clearCacheAll',
method: 'delete' method: 'delete'
}) })
} }

68
sf-ui/src/api/monitor/logininfor.js
View File

@ -1,34 +1,34 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询登录日志列表 // 查询登录日志列表
export function list(query) { export function list(query) {
return request({ return request({
url: '/monitor/logininfor/list', url: '/monitor/logininfor/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 删除登录日志 // 删除登录日志
export function delLogininfor(infoId) { export function delLogininfor(infoId) {
return request({ return request({
url: '/monitor/logininfor/' + infoId, url: '/monitor/logininfor/' + infoId,
method: 'delete' method: 'delete'
}) })
} }
// 解锁用户登录状态 // 解锁用户登录状态
export function unlockLogininfor(userName) { export function unlockLogininfor(userName) {
return request({ return request({
url: '/monitor/logininfor/unlock/' + userName, url: '/monitor/logininfor/unlock/' + userName,
method: 'get' method: 'get'
}) })
} }
// 清空登录日志 // 清空登录日志
export function cleanLogininfor() { export function cleanLogininfor() {
return request({ return request({
url: '/monitor/logininfor/clean', url: '/monitor/logininfor/clean',
method: 'delete' method: 'delete'
}) })
} }

36
sf-ui/src/api/monitor/online.js
View File

@ -1,18 +1,18 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询在线用户列表 // 查询在线用户列表
export function list(query) { export function list(query) {
return request({ return request({
url: '/monitor/online/list', url: '/monitor/online/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 强退用户 // 强退用户
export function forceLogout(tokenId) { export function forceLogout(tokenId) {
return request({ return request({
url: '/monitor/online/' + tokenId, url: '/monitor/online/' + tokenId,
method: 'delete' method: 'delete'
}) })
} }

52
sf-ui/src/api/monitor/operlog.js
View File

@ -1,26 +1,26 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询操作日志列表 // 查询操作日志列表
export function list(query) { export function list(query) {
return request({ return request({
url: '/monitor/operlog/list', url: '/monitor/operlog/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 删除操作日志 // 删除操作日志
export function delOperlog(operId) { export function delOperlog(operId) {
return request({ return request({
url: '/monitor/operlog/' + operId, url: '/monitor/operlog/' + operId,
method: 'delete' method: 'delete'
}) })
} }
// 清空操作日志 // 清空操作日志
export function cleanOperlog() { export function cleanOperlog() {
return request({ return request({
url: '/monitor/operlog/clean', url: '/monitor/operlog/clean',
method: 'delete' method: 'delete'
}) })
} }

16
sf-ui/src/api/monitor/server.js
View File

@ -1,9 +1,9 @@
import request from '@/utils/request' import request from '@/utils/request'
// 获取服务信息 // 获取服务信息
export function getServer() { export function getServer() {
return request({ return request({
url: '/monitor/server', url: '/monitor/server',
method: 'get' method: 'get'
}) })
} }

120
sf-ui/src/api/system/config.js
View File

@ -1,60 +1,60 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询参数列表 // 查询参数列表
export function listConfig(query) { export function listConfig(query) {
return request({ return request({
url: '/system/config/list', url: '/system/config/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询参数详细 // 查询参数详细
export function getConfig(configId) { export function getConfig(configId) {
return request({ return request({
url: '/system/config/' + configId, url: '/system/config/' + configId,
method: 'get' method: 'get'
}) })
} }
// 根据参数键名查询参数值 // 根据参数键名查询参数值
export function getConfigKey(configKey) { export function getConfigKey(configKey) {
return request({ return request({
url: '/system/config/configKey/' + configKey, url: '/system/config/configKey/' + configKey,
method: 'get' method: 'get'
}) })
} }
// 新增参数配置 // 新增参数配置
export function addConfig(data) { export function addConfig(data) {
return request({ return request({
url: '/system/config', url: '/system/config',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改参数配置 // 修改参数配置
export function updateConfig(data) { export function updateConfig(data) {
return request({ return request({
url: '/system/config', url: '/system/config',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除参数配置 // 删除参数配置
export function delConfig(configId) { export function delConfig(configId) {
return request({ return request({
url: '/system/config/' + configId, url: '/system/config/' + configId,
method: 'delete' method: 'delete'
}) })
} }
// 刷新参数缓存 // 刷新参数缓存
export function refreshCache() { export function refreshCache() {
return request({ return request({
url: '/system/config/refreshCache', url: '/system/config/refreshCache',
method: 'delete' method: 'delete'
}) })
} }

102
sf-ui/src/api/system/dept.js
View File

@ -1,52 +1,52 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询部门列表 // 查询部门列表
export function listDept(query) { export function listDept(query) {
return request({ return request({
url: '/system/dept/list', url: '/system/dept/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询部门列表（排除节点） // 查询部门列表（排除节点）
export function listDeptExcludeChild(deptId) { export function listDeptExcludeChild(deptId) {
return request({ return request({
url: '/system/dept/list/exclude/' + deptId, url: '/system/dept/list/exclude/' + deptId,
method: 'get' method: 'get'
}) })
} }
// 查询部门详细 // 查询部门详细
export function getDept(deptId) { export function getDept(deptId) {
return request({ return request({
url: '/system/dept/' + deptId, url: '/system/dept/' + deptId,
method: 'get' method: 'get'
}) })
} }
// 新增部门 // 新增部门
export function addDept(data) { export function addDept(data) {
return request({ return request({
url: '/system/dept', url: '/system/dept',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改部门 // 修改部门
export function updateDept(data) { export function updateDept(data) {
return request({ return request({
url: '/system/dept', url: '/system/dept',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除部门 // 删除部门
export function delDept(deptId) { export function delDept(deptId) {
return request({ return request({
url: '/system/dept/' + deptId, url: '/system/dept/' + deptId,
method: 'delete' method: 'delete'
}) })
} }

104
sf-ui/src/api/system/dict/data.js
View File

@ -1,52 +1,52 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询字典数据列表 // 查询字典数据列表
export function listData(query) { export function listData(query) {
return request({ return request({
url: '/system/dict/data/list', url: '/system/dict/data/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询字典数据详细 // 查询字典数据详细
export function getData(dictCode) { export function getData(dictCode) {
return request({ return request({
url: '/system/dict/data/' + dictCode, url: '/system/dict/data/' + dictCode,
method: 'get' method: 'get'
}) })
} }
// 根据字典类型查询字典数据信息 // 根据字典类型查询字典数据信息
export function getDicts(dictType) { export function getDicts(dictType) {
return request({ return request({
url: '/system/dict/data/type/' + dictType, url: '/system/dict/data/type/' + dictType,
method: 'get' method: 'get'
}) })
} }
// 新增字典数据 // 新增字典数据
export function addData(data) { export function addData(data) {
return request({ return request({
url: '/system/dict/data', url: '/system/dict/data',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改字典数据 // 修改字典数据
export function updateData(data) { export function updateData(data) {
return request({ return request({
url: '/system/dict/data', url: '/system/dict/data',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除字典数据 // 删除字典数据
export function delData(dictCode) { export function delData(dictCode) {
return request({ return request({
url: '/system/dict/data/' + dictCode, url: '/system/dict/data/' + dictCode,
method: 'delete' method: 'delete'
}) })
} }

118
sf-ui/src/api/system/dict/type.js
View File

@ -1,60 +1,60 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询字典类型列表 // 查询字典类型列表
export function listType(query) { export function listType(query) {
return request({ return request({
url: '/system/dict/type/list', url: '/system/dict/type/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询字典类型详细 // 查询字典类型详细
export function getType(dictId) { export function getType(dictId) {
return request({ return request({
url: '/system/dict/type/' + dictId, url: '/system/dict/type/' + dictId,
method: 'get' method: 'get'
}) })
} }
// 新增字典类型 // 新增字典类型
export function addType(data) { export function addType(data) {
return request({ return request({
url: '/system/dict/type', url: '/system/dict/type',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改字典类型 // 修改字典类型
export function updateType(data) { export function updateType(data) {
return request({ return request({
url: '/system/dict/type', url: '/system/dict/type',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除字典类型 // 删除字典类型
export function delType(dictId) { export function delType(dictId) {
return request({ return request({
url: '/system/dict/type/' + dictId, url: '/system/dict/type/' + dictId,
method: 'delete' method: 'delete'
}) })
} }
// 刷新字典缓存 // 刷新字典缓存
export function refreshCache() { export function refreshCache() {
return request({ return request({
url: '/system/dict/type/refreshCache', url: '/system/dict/type/refreshCache',
method: 'delete' method: 'delete'
}) })
} }
// 获取字典选择框列表 // 获取字典选择框列表
export function optionselect() { export function optionselect() {
return request({ return request({
url: '/system/dict/type/optionselect', url: '/system/dict/type/optionselect',
method: 'get' method: 'get'
}) })
} }

118
sf-ui/src/api/system/menu.js
View File

@ -1,60 +1,60 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询菜单列表 // 查询菜单列表
export function listMenu(query) { export function listMenu(query) {
return request({ return request({
url: '/system/menu/list', url: '/system/menu/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询菜单详细 // 查询菜单详细
export function getMenu(menuId) { export function getMenu(menuId) {
return request({ return request({
url: '/system/menu/' + menuId, url: '/system/menu/' + menuId,
method: 'get' method: 'get'
}) })
} }
// 查询菜单下拉树结构 // 查询菜单下拉树结构
export function treeselect() { export function treeselect() {
return request({ return request({
url: '/system/menu/treeselect', url: '/system/menu/treeselect',
method: 'get' method: 'get'
}) })
} }
// 根据角色ID查询菜单下拉树结构 // 根据角色ID查询菜单下拉树结构
export function roleMenuTreeselect(roleId) { export function roleMenuTreeselect(roleId) {
return request({ return request({
url: '/system/menu/roleMenuTreeselect/' + roleId, url: '/system/menu/roleMenuTreeselect/' + roleId,
method: 'get' method: 'get'
}) })
} }
// 新增菜单 // 新增菜单
export function addMenu(data) { export function addMenu(data) {
return request({ return request({
url: '/system/menu', url: '/system/menu',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改菜单 // 修改菜单
export function updateMenu(data) { export function updateMenu(data) {
return request({ return request({
url: '/system/menu', url: '/system/menu',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除菜单 // 删除菜单
export function delMenu(menuId) { export function delMenu(menuId) {
return request({ return request({
url: '/system/menu/' + menuId, url: '/system/menu/' + menuId,
method: 'delete' method: 'delete'
}) })
} }

86
sf-ui/src/api/system/notice.js
View File

@ -1,44 +1,44 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询公告列表 // 查询公告列表
export function listNotice(query) { export function listNotice(query) {
return request({ return request({
url: '/system/notice/list', url: '/system/notice/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询公告详细 // 查询公告详细
export function getNotice(noticeId) { export function getNotice(noticeId) {
return request({ return request({
url: '/system/notice/' + noticeId, url: '/system/notice/' + noticeId,
method: 'get' method: 'get'
}) })
} }
// 新增公告 // 新增公告
export function addNotice(data) { export function addNotice(data) {
return request({ return request({
url: '/system/notice', url: '/system/notice',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改公告 // 修改公告
export function updateNotice(data) { export function updateNotice(data) {
return request({ return request({
url: '/system/notice', url: '/system/notice',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除公告 // 删除公告
export function delNotice(noticeId) { export function delNotice(noticeId) {
return request({ return request({
url: '/system/notice/' + noticeId, url: '/system/notice/' + noticeId,
method: 'delete' method: 'delete'
}) })
} }

88
sf-ui/src/api/system/post.js
View File

@ -1,44 +1,44 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询岗位列表 // 查询岗位列表
export function listPost(query) { export function listPost(query) {
return request({ return request({
url: '/system/post/list', url: '/system/post/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询岗位详细 // 查询岗位详细
export function getPost(postId) { export function getPost(postId) {
return request({ return request({
url: '/system/post/' + postId, url: '/system/post/' + postId,
method: 'get' method: 'get'
}) })
} }
// 新增岗位 // 新增岗位
export function addPost(data) { export function addPost(data) {
return request({ return request({
url: '/system/post', url: '/system/post',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改岗位 // 修改岗位
export function updatePost(data) { export function updatePost(data) {
return request({ return request({
url: '/system/post', url: '/system/post',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除岗位 // 删除岗位
export function delPost(postId) { export function delPost(postId) {
return request({ return request({
url: '/system/post/' + postId, url: '/system/post/' + postId,
method: 'delete' method: 'delete'
}) })
} }

238
sf-ui/src/api/system/role.js
View File

@ -1,119 +1,119 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询角色列表 // 查询角色列表
export function listRole(query) { export function listRole(query) {
return request({ return request({
url: '/system/role/list', url: '/system/role/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询角色详细 // 查询角色详细
export function getRole(roleId) { export function getRole(roleId) {
return request({ return request({
url: '/system/role/' + roleId, url: '/system/role/' + roleId,
method: 'get' method: 'get'
}) })
} }
// 新增角色 // 新增角色
export function addRole(data) { export function addRole(data) {
return request({ return request({
url: '/system/role', url: '/system/role',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改角色 // 修改角色
export function updateRole(data) { export function updateRole(data) {
return request({ return request({
url: '/system/role', url: '/system/role',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 角色数据权限 // 角色数据权限
export function dataScope(data) { export function dataScope(data) {
return request({ return request({
url: '/system/role/dataScope', url: '/system/role/dataScope',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 角色状态修改 // 角色状态修改
export function changeRoleStatus(roleId, status) { export function changeRoleStatus(roleId, status) {
const data = { const data = {
roleId, roleId,
status status
} }
return request({ return request({
url: '/system/role/changeStatus', url: '/system/role/changeStatus',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除角色 // 删除角色
export function delRole(roleId) { export function delRole(roleId) {
return request({ return request({
url: '/system/role/' + roleId, url: '/system/role/' + roleId,
method: 'delete' method: 'delete'
}) })
} }
// 查询角色已授权用户列表 // 查询角色已授权用户列表
export function allocatedUserList(query) { export function allocatedUserList(query) {
return request({ return request({
url: '/system/role/authUser/allocatedList', url: '/system/role/authUser/allocatedList',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询角色未授权用户列表 // 查询角色未授权用户列表
export function unallocatedUserList(query) { export function unallocatedUserList(query) {
return request({ return request({
url: '/system/role/authUser/unallocatedList', url: '/system/role/authUser/unallocatedList',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 取消用户授权角色 // 取消用户授权角色
export function authUserCancel(data) { export function authUserCancel(data) {
return request({ return request({
url: '/system/role/authUser/cancel', url: '/system/role/authUser/cancel',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 批量取消用户授权角色 // 批量取消用户授权角色
export function authUserCancelAll(data) { export function authUserCancelAll(data) {
return request({ return request({
url: '/system/role/authUser/cancelAll', url: '/system/role/authUser/cancelAll',
method: 'put', method: 'put',
params: data params: data
}) })
} }
// 授权用户选择 // 授权用户选择
export function authUserSelectAll(data) { export function authUserSelectAll(data) {
return request({ return request({
url: '/system/role/authUser/selectAll', url: '/system/role/authUser/selectAll',
method: 'put', method: 'put',
params: data params: data
}) })
} }
// 根据角色ID查询部门树结构 // 根据角色ID查询部门树结构
export function deptTreeSelect(roleId) { export function deptTreeSelect(roleId) {
return request({ return request({
url: '/system/role/deptTree/' + roleId, url: '/system/role/deptTree/' + roleId,
method: 'get' method: 'get'
}) })
} }

270
sf-ui/src/api/system/user.js
View File

@ -1,135 +1,135 @@
import request from '@/utils/request' import request from '@/utils/request'
import { parseStrEmpty } from "@/utils/ruoyi"; import { parseStrEmpty } from "@/utils/ruoyi";
// 查询用户列表 // 查询用户列表
export function listUser(query) { export function listUser(query) {
return request({ return request({
url: '/system/user/list', url: '/system/user/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询用户详细 // 查询用户详细
export function getUser(userId) { export function getUser(userId) {
return request({ return request({
url: '/system/user/' + parseStrEmpty(userId), url: '/system/user/' + parseStrEmpty(userId),
method: 'get' method: 'get'
}) })
} }
// 新增用户 // 新增用户
export function addUser(data) { export function addUser(data) {
return request({ return request({
url: '/system/user', url: '/system/user',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改用户 // 修改用户
export function updateUser(data) { export function updateUser(data) {
return request({ return request({
url: '/system/user', url: '/system/user',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 删除用户 // 删除用户
export function delUser(userId) { export function delUser(userId) {
return request({ return request({
url: '/system/user/' + userId, url: '/system/user/' + userId,
method: 'delete' method: 'delete'
}) })
} }
// 用户密码重置 // 用户密码重置
export function resetUserPwd(userId, password) { export function resetUserPwd(userId, password) {
const data = { const data = {
userId, userId,
password password
} }
return request({ return request({
url: '/system/user/resetPwd', url: '/system/user/resetPwd',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 用户状态修改 // 用户状态修改
export function changeUserStatus(userId, status) { export function changeUserStatus(userId, status) {
const data = { const data = {
userId, userId,
status status
} }
return request({ return request({
url: '/system/user/changeStatus', url: '/system/user/changeStatus',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 查询用户个人信息 // 查询用户个人信息
export function getUserProfile() { export function getUserProfile() {
return request({ return request({
url: '/system/user/profile', url: '/system/user/profile',
method: 'get' method: 'get'
}) })
} }
// 修改用户个人信息 // 修改用户个人信息
export function updateUserProfile(data) { export function updateUserProfile(data) {
return request({ return request({
url: '/system/user/profile', url: '/system/user/profile',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 用户密码重置 // 用户密码重置
export function updateUserPwd(oldPassword, newPassword) { export function updateUserPwd(oldPassword, newPassword) {
const data = { const data = {
oldPassword, oldPassword,
newPassword newPassword
} }
return request({ return request({
url: '/system/user/profile/updatePwd', url: '/system/user/profile/updatePwd',
method: 'put', method: 'put',
params: data params: data
}) })
} }
// 用户头像上传 // 用户头像上传
export function uploadAvatar(data) { export function uploadAvatar(data) {
return request({ return request({
url: '/system/user/profile/avatar', url: '/system/user/profile/avatar',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 查询授权角色 // 查询授权角色
export function getAuthRole(userId) { export function getAuthRole(userId) {
return request({ return request({
url: '/system/user/authRole/' + userId, url: '/system/user/authRole/' + userId,
method: 'get' method: 'get'
}) })
} }
// 保存授权角色 // 保存授权角色
export function updateAuthRole(data) { export function updateAuthRole(data) {
return request({ return request({
url: '/system/user/authRole', url: '/system/user/authRole',
method: 'put', method: 'put',
params: data params: data
}) })
} }
// 查询部门下拉树结构 // 查询部门下拉树结构
export function deptTreeSelect() { export function deptTreeSelect() {
return request({ return request({
url: '/system/user/deptTree', url: '/system/user/deptTree',
method: 'get' method: 'get'
}) })
} }

152
sf-ui/src/api/tool/gen.js
View File

@ -1,76 +1,76 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询生成表数据 // 查询生成表数据
export function listTable(query) { export function listTable(query) {
return request({ return request({
url: '/tool/gen/list', url: '/tool/gen/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询db数据库列表 // 查询db数据库列表
export function listDbTable(query) { export function listDbTable(query) {
return request({ return request({
url: '/tool/gen/db/list', url: '/tool/gen/db/list',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 查询表详细信息 // 查询表详细信息
export function getGenTable(tableId) { export function getGenTable(tableId) {
return request({ return request({
url: '/tool/gen/' + tableId, url: '/tool/gen/' + tableId,
method: 'get' method: 'get'
}) })
} }
// 修改代码生成信息 // 修改代码生成信息
export function updateGenTable(data) { export function updateGenTable(data) {
return request({ return request({
url: '/tool/gen', url: '/tool/gen',
method: 'put', method: 'put',
data: data data: data
}) })
} }
// 导入表 // 导入表
export function importTable(data) { export function importTable(data) {
return request({ return request({
url: '/tool/gen/importTable', url: '/tool/gen/importTable',
method: 'post', method: 'post',
params: data params: data
}) })
} }
// 预览生成代码 // 预览生成代码
export function previewTable(tableId, json) { export function previewTable(tableId, json) {
return request({ return request({
url: '/tool/gen/preview/' + tableId+'/'+json, url: '/tool/gen/preview/' + tableId+'/'+json,
method: 'get' method: 'get'
}) })
} }
// 删除表数据 // 删除表数据
export function delTable(tableId) { export function delTable(tableId) {
return request({ return request({
url: '/tool/gen/' + tableId, url: '/tool/gen/' + tableId,
method: 'delete' method: 'delete'
}) })
} }
// 生成代码（自定义路径） // 生成代码（自定义路径）
export function genCode(tableName,json) { export function genCode(tableName,json) {
return request({ return request({
url: '/tool/gen/genCode/' + tableName+'/'+json, url: '/tool/gen/genCode/' + tableName+'/'+json,
method: 'get' method: 'get'
}) })
} }
// 同步数据库 // 同步数据库
export function synchDb(tableName) { export function synchDb(tableName) {
return request({ return request({
url: '/tool/gen/synchDb/' + tableName, url: '/tool/gen/synchDb/' + tableName,
method: 'get' method: 'get'
}) })
} }

18
sf-ui/src/assets/icons/index.js
View File

@ -1,9 +1,9 @@
import Vue from 'vue' import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component import SvgIcon from '@/components/SvgIcon'// svg component
// register globally // register globally
Vue.component('svg-icon', SvgIcon) Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/) const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext) const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req) requireAll(req)

2
sf-ui/src/assets/icons/svg/monitor.svg
View File

@ -1,2 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827393750" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4695" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; } <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827393750" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4695" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
</style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="4696"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="4697"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="4698"></path></svg> </style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="4696"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="4697"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="4698"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 883 B

After

Width:  |  Height:  |  Size: 884 B

2
sf-ui/src/assets/icons/svg/system.svg
View File

@ -1,2 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827724451" class="icon" style="" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10233" xmlns:xlink="http://www.w3.org/1999/xlink" width="211.71875" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; } <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827724451" class="icon" style="" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10233" xmlns:xlink="http://www.w3.org/1999/xlink" width="211.71875" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
</style></defs><path d="M1080.09609 434.500756c-4.216302-23.731757-26.9241-47.945376-50.595623-53.185637l-17.648235-4.095836a175.940257 175.940257 0 0 1-101.612877-80.832531 177.807476 177.807476 0 0 1-18.732427-129.801867l5.541425-16.684509c7.10748-23.129428-2.108151-54.992624-20.599646-70.833873 0 0-16.624276-14.094495-63.244529-41.199293-46.800951-26.984332-66.858502-34.513443-66.858502-34.513443-22.76803-8.372371-54.631227-0.361397-71.255503 17.407304l-12.287509 13.251234a173.470708 173.470708 0 0 1-120.465769 48.065842A174.13327 174.13327 0 0 1 421.329029 33.590675L409.583617 20.761071C393.140039 2.99237 361.096144-4.898138 338.267881 3.353767c0 0-20.358715 7.529111-67.099434 34.513443-46.800951 27.34573-63.244529 41.440225-63.244529 41.440225-18.431263 15.66055-27.646894 47.222582-20.539413 70.592941l5.059562 16.865207a178.048407 178.048407 0 0 1-18.672194 129.621169 174.916297 174.916297 0 0 1-102.275439 81.073463l-17.045906 3.854904c-23.310126 5.42096-46.258856 29.333415-50.595623 53.185637 0 0-3.854905 21.382674-3.854905 75.712737 0 54.330062 3.854905 75.712736 3.854905 75.712736 4.216302 23.972688 26.9241 47.945376 50.595623 53.185637l16.624276 3.854905a174.253736 174.253736 0 0 1 102.395904 81.314394c23.310126 40.837896 28.911785 87.337683 18.732427 129.801867l-4.81863 16.443578c-7.10748 23.129428 2.108151 54.992624 20.599646 70.833872 0 0 16.624276 14.094495 63.244529 41.199293 46.800951 27.104798 66.918735 34.513443 66.918735 34.513443 22.707798 8.372371 54.631227 0.361397 71.255503-17.407303l11.624947-12.588673a175.096996 175.096996 0 0 1 242.256662 0.120465l11.624947 12.648906c16.383345 17.708468 48.427239 25.598976 71.255503 17.347071 0 0 20.358715-7.529111 67.159666-34.513443 46.740719-27.104798 63.124063-41.199293 63.124064-41.199293 18.491496-15.600317 27.707127-47.463513 20.599646-70.833873l-5.059562-17.106139a176.723284 176.723284 0 0 1 18.672194-129.139305 176.060722 176.060722 0 0 1 102.395904-81.314394l16.68451-3.854905c23.310126-5.42096 46.258856-29.333415 50.595623-53.185637 0 0 3.854905-21.382674 3.854904-75.712737-0.240932-54.330062-4.095836-75.833202-4.095836-75.833202z m-537.819428 293.334149c-119.261112 0-216.175824-97.336342-216.175824-217.621412a216.657687 216.657687 0 0 1 216.236057-217.320249c119.200879 0 216.115591 97.276109 216.11559 217.56118-0.240932 120.044139-96.974945 217.320248-216.175823 217.320249z" p-id="10234"></path></svg> </style></defs><path d="M1080.09609 434.500756c-4.216302-23.731757-26.9241-47.945376-50.595623-53.185637l-17.648235-4.095836a175.940257 175.940257 0 0 1-101.612877-80.832531 177.807476 177.807476 0 0 1-18.732427-129.801867l5.541425-16.684509c7.10748-23.129428-2.108151-54.992624-20.599646-70.833873 0 0-16.624276-14.094495-63.244529-41.199293-46.800951-26.984332-66.858502-34.513443-66.858502-34.513443-22.76803-8.372371-54.631227-0.361397-71.255503 17.407304l-12.287509 13.251234a173.470708 173.470708 0 0 1-120.465769 48.065842A174.13327 174.13327 0 0 1 421.329029 33.590675L409.583617 20.761071C393.140039 2.99237 361.096144-4.898138 338.267881 3.353767c0 0-20.358715 7.529111-67.099434 34.513443-46.800951 27.34573-63.244529 41.440225-63.244529 41.440225-18.431263 15.66055-27.646894 47.222582-20.539413 70.592941l5.059562 16.865207a178.048407 178.048407 0 0 1-18.672194 129.621169 174.916297 174.916297 0 0 1-102.275439 81.073463l-17.045906 3.854904c-23.310126 5.42096-46.258856 29.333415-50.595623 53.185637 0 0-3.854905 21.382674-3.854905 75.712737 0 54.330062 3.854905 75.712736 3.854905 75.712736 4.216302 23.972688 26.9241 47.945376 50.595623 53.185637l16.624276 3.854905a174.253736 174.253736 0 0 1 102.395904 81.314394c23.310126 40.837896 28.911785 87.337683 18.732427 129.801867l-4.81863 16.443578c-7.10748 23.129428 2.108151 54.992624 20.599646 70.833872 0 0 16.624276 14.094495 63.244529 41.199293 46.800951 27.104798 66.918735 34.513443 66.918735 34.513443 22.707798 8.372371 54.631227 0.361397 71.255503-17.407303l11.624947-12.588673a175.096996 175.096996 0 0 1 242.256662 0.120465l11.624947 12.648906c16.383345 17.708468 48.427239 25.598976 71.255503 17.347071 0 0 20.358715-7.529111 67.159666-34.513443 46.740719-27.104798 63.124063-41.199293 63.124064-41.199293 18.491496-15.600317 27.707127-47.463513 20.599646-70.833873l-5.059562-17.106139a176.723284 176.723284 0 0 1 18.672194-129.139305 176.060722 176.060722 0 0 1 102.395904-81.314394l16.68451-3.854905c23.310126-5.42096 46.258856-29.333415 50.595623-53.185637 0 0 3.854905-21.382674 3.854904-75.712737-0.240932-54.330062-4.095836-75.833202-4.095836-75.833202z m-537.819428 293.334149c-119.261112 0-216.175824-97.336342-216.175824-217.621412a216.657687 216.657687 0 0 1 216.236057-217.320249c119.200879 0 216.115591 97.276109 216.11559 217.56118-0.240932 120.044139-96.974945 217.320248-216.175823 217.320249z" p-id="10234"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

44
sf-ui/src/assets/icons/svgo.yml
View File

@ -1,22 +1,22 @@
# replace default config # replace default config
# multipass: true # multipass: true
# full: true # full: true
plugins: plugins:
# - name # - name
# #
# or: # or:
# - name: false # - name: false
# - name: true # - name: true
# #
# or: # or:
# - name: # - name:
# param1: 1 # param1: 1
# param2: 2 # param2: 2
- removeAttrs: - removeAttrs:
attrs: attrs:
- 'fill' - 'fill'
- 'fill-rule' - 'fill-rule'

76
sf-ui/src/assets/images/dark.svg
View File

@ -1,39 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" <svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1"> <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge> <feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge> </feMerge>
</filter> </filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect> <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4"> <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter> </filter>
</defs> </defs>
<g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)"> <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)"> <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)"> <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
<mask id="mask-3" fill="white"> <mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use> <use xlink:href="#path-2"></use>
</mask> </mask>
<g id="Rectangle-18"> <g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use> <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use> <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g> </g>
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect> <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect> <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
</g> </g>
</g> </g>
</g> </g>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
sf-ui/src/assets/images/filter_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 575 B

76
sf-ui/src/assets/images/light.svg
View File

@ -1,39 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" <svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1"> <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge> <feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge> </feMerge>
</filter> </filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect> <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4"> <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter> </filter>
</defs> </defs>
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)"> <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)"> <g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)"> <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
<mask id="mask-3" fill="white"> <mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use> <use xlink:href="#path-2"></use>
</mask> </mask>
<g id="Rectangle-18"> <g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use> <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use> <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g> </g>
<rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect> <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect> <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
</g> </g>
</g> </g>
</g> </g>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
sf-ui/src/assets/images/login-background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 MiB

BIN
sf-ui/src/assets/images/profile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

27
sf-ui/src/assets/logo/logo.svg
View File

@ -1,27 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="104px" height="30px" viewBox="0 0 104 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>SAC</title>
<defs>
<linearGradient x1="50%" y1="12.1751553%" x2="57.1919171%" y2="87.8248447%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#E5F1FF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="89.6896665%" y1="8.24507501%" x2="11.6260569%" y2="79.7724897%" id="linearGradient-2">
<stop stop-color="#79C3FF" offset="0%"></stop>
<stop stop-color="#4490FE" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="17.0179916%" x2="57.1919171%" y2="82.9820084%" id="linearGradient-3">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#E5F1FF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="官网" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页" transform="translate(-262, -23)" fill-rule="nonzero">
<g id="logo" transform="translate(262, 23)">
<path d="M32.7865113,0.35850417 L30.7865113,6.44149583 L9.48530263,6.44149583 C8.1356254,6.44149583 7.04149583,7.5356254 7.04149583,8.88530263 C7.04149583,10.2349799 8.1356254,11.3291094 9.48530263,11.3291094 L23.8419133,11.3291094 C28.4569114,11.3291094 32.1981065,15.0703046 32.1981065,19.6853026 C32.1981065,24.3003007 28.4569114,28.0414958 23.8419133,28.0414958 L1.31479405,28.0414958 L3.31479405,21.9585042 L23.8419133,21.9585042 C25.0973678,21.9585042 26.1151148,20.9407572 26.1151148,19.6853026 C26.1151148,18.4298481 25.0973678,17.4121011 23.8419133,17.4121011 L9.48530263,17.4121011 C4.77608188,17.4121011 0.95850417,13.5945234 0.95850417,8.88530263 C0.95850417,4.17608188 4.77608188,0.35850417 9.48530263,0.35850417 L32.7865113,0.35850417 Z" id="路径-9" fill="url(#linearGradient-1)"></path>
<path d="M38.8681484,0.0454698506 L50.8563478,21.0969657 L59.5873478,6.61496568 L47.4598541,6.61559281 L44.4598541,0.532601149 L64.9730561,0.532601149 C67.3400843,0.532601149 68.7999234,3.11736276 67.5777828,5.14447769 L55.2888271,25.5276696 C54.8343051,26.2815668 54.1956757,26.9076108 53.4328824,27.3470396 C50.9465576,28.7793575 47.76987,27.9249162 46.337552,25.4385914 L31.7387233,0.0819362866 L38.8681484,0.0454698506 Z" id="路径-27" fill="url(#linearGradient-2)" transform="translate(49.879, 14.0435) scale(1, -1) translate(-49.879, -14.0435)"></path>
<path d="M94.832475,0.35850417 L96.832475,6.44149583 L82.7982917,6.44149583 C78.5133882,6.44149583 75.0397876,9.91509647 75.0397876,14.2 C75.0397876,18.4849035 78.5133882,21.9585042 82.7982917,21.9585042 L101.041496,21.9585042 L103.041496,28.0414958 L82.7982917,28.0414958 C75.1538447,28.0414958 68.9567959,21.8444471 68.9567959,14.2 C68.9567959,6.55555294 75.1538447,0.35850417 82.7982917,0.35850417 L94.832475,0.35850417 Z" id="路径-28" fill="url(#linearGradient-3)"></path>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

198
sf-ui/src/assets/styles/btn.scss
View File

@ -1,99 +1,99 @@
@import "./variables.scss"; @import './variables.scss';
@mixin colorBtn($color) { @mixin colorBtn($color) {
background: $color; background: $color;
&:hover { &:hover {
color: $color; color: $color;
&:before, &:before,
&:after { &:after {
background: $color; background: $color;
} }
} }
} }
.blue-btn { .blue-btn {
@include colorBtn($blue); @include colorBtn($blue)
} }
.light-blue-btn { .light-blue-btn {
@include colorBtn($light-blue); @include colorBtn($light-blue)
} }
.red-btn { .red-btn {
@include colorBtn($red); @include colorBtn($red)
} }
.pink-btn { .pink-btn {
@include colorBtn($pink); @include colorBtn($pink)
} }
.green-btn { .green-btn {
@include colorBtn($green); @include colorBtn($green)
} }
.tiffany-btn { .tiffany-btn {
@include colorBtn($tiffany); @include colorBtn($tiffany)
} }
.yellow-btn { .yellow-btn {
@include colorBtn($yellow); @include colorBtn($yellow)
} }
.pan-btn { .pan-btn {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
padding: 14px 36px; padding: 14px 36px;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
outline: none; outline: none;
transition: 600ms ease all; transition: 600ms ease all;
position: relative; position: relative;
display: inline-block; display: inline-block;
&:hover { &:hover {
background: #fff; background: #fff;
&:before, &:before,
&:after { &:after {
width: 100%; width: 100%;
transition: 600ms ease all; transition: 600ms ease all;
} }
} }
&:before, &:before,
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
height: 2px; height: 2px;
width: 0; width: 0;
transition: 400ms ease all; transition: 400ms ease all;
} }
&::after { &::after {
right: inherit; right: inherit;
top: inherit; top: inherit;
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
} }
.custom-button { .custom-button {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
color: #fff; color: #fff;
-webkit-appearance: none; -webkit-appearance: none;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
outline: 0; outline: 0;
margin: 0; margin: 0;
padding: 10px 15px; padding: 10px 15px;
font-size: 14px; font-size: 14px;
border-radius: 4px; border-radius: 4px;
} }

52
sf-ui/src/assets/styles/element-ui.scss
View File

@ -52,19 +52,6 @@
left: 0; left: 0;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
.el-dialog__header {
padding: 20px 24px;
}
.el-dialog__header {
padding: 20px 24px;
}
.el-dialog__body {
padding: 24px;
}
.el-dialog__footer {
padding: 24px;
padding-top: 0px;
}
} }
// refine element ui upload // refine element ui upload
@ -82,7 +69,7 @@
// dropdown // dropdown
.el-dropdown-menu { .el-dropdown-menu {
a { a {
display: block; display: block
} }
} }
@ -102,39 +89,4 @@
> .el-submenu__title > .el-submenu__title
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
display: none; display: none;
} }
.el-table {
.el-dropdown-menu {
display: flex;
}
.el-dropdown-menu__item {
display: flex;
flex: 1; /* 让所有项均分空间 */
justify-content: center; /* 水平居中 */
}
.el-dropdown-menu--mini .el-dropdown-menu__item {
padding: 0px;
margin-right: 12px;
}
.el-dropdown-menu--mini .el-dropdown-menu__item:first-child {
padding: 0px;
margin-left: 12px;
}
}
.el-table__column-filter-trigger {
position: relative;
.el-icon-arrow-down {
background: url("../images/filter_icon.png") no-repeat;
width: 15px;
height: 15px;
background-size: 100% 100%;
position: absolute;
top: -12px;
&::before {
display: none;
}
// display: none;
}
}

67
sf-ui/src/assets/styles/element-variables.scss
View File

@ -1,36 +1,31 @@
/** /**
* I think element-ui's default theme color is too light for long-term use. * I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking. * So I modified the default color and you can modify it to your liking.
**/ **/
/* theme color */ /* theme color */
$--color-primary: #3F68FF; $--color-primary: #1890ff;
$--color-success: #67C23A; $--color-success: #13ce66;
$--color-warning: #ffba00; $--color-warning: #ffba00;
$--color-danger: #FA5555; $--color-danger: #ff4949;
// $--color-info: #1E1E1E; // $--color-info: #1E1E1E;
// $--color-primary: #1890ff;
// $--color-success: #13ce66; $--button-font-weight: 400;
// $--color-warning: #ffba00;
// $--color-danger: #ff4949; // $--color-text-regular: #1f2d3d;
// $--color-info: #1E1E1E;
$--border-color-light: #dfe4ed;
$--button-font-weight: 400; $--border-color-lighter: #e6ebf5;
// $--color-text-regular: #1f2d3d; $--table-border: 1px solid #dfe6ec;
$--border-color-light: #dfe4ed; /* icon font path, required */
$--border-color-lighter: #e6ebf5; $--font-path: '~element-ui/lib/theme-chalk/fonts';
$--table-border: 1px solid #dfe6ec; @import "~element-ui/packages/theme-chalk/src/index";
/* icon font path, required */ // the :export directive is the magic sauce for webpack
$--font-path: '~element-ui/lib/theme-chalk/fonts'; // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
@import "~element-ui/packages/theme-chalk/src/index"; theme: $--color-primary;
}
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
theme: $--color-primary;
}

12
sf-ui/src/assets/styles/index.scss
View File

@ -122,12 +122,6 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 20px;
&-flex {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
} }
.components-container { .components-container {
@ -186,9 +180,3 @@ aside {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.required-asterisk::before {
content: "*";
color: #ff4949;
margin-right: 4px;
}

132
sf-ui/src/assets/styles/mixin.scss
View File

@ -1,66 +1,66 @@
@mixin clearfix { @mixin clearfix {
&:after { &:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
} }
@mixin scrollBar { @mixin scrollBar {
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
background: #d3dce6; background: #d3dce6;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #99a9bf; background: #99a9bf;
border-radius: 20px; border-radius: 20px;
} }
} }
@mixin relative { @mixin relative {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@mixin pct($pct) { @mixin pct($pct) {
width: #{$pct}; width: #{$pct};
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
} }
@mixin triangle($width, $height, $color, $direction) { @mixin triangle($width, $height, $color, $direction) {
$width: $width/2; $width: $width/2;
$color-border-style: $height solid $color; $color-border-style: $height solid $color;
$transparent-border-style: $width solid transparent; $transparent-border-style: $width solid transparent;
height: 0; height: 0;
width: 0; width: 0;
@if $direction==up { @if $direction==up {
border-bottom: $color-border-style; border-bottom: $color-border-style;
border-left: $transparent-border-style; border-left: $transparent-border-style;
border-right: $transparent-border-style; border-right: $transparent-border-style;
} }
@else if $direction==right { @else if $direction==right {
border-left: $color-border-style; border-left: $color-border-style;
border-top: $transparent-border-style; border-top: $transparent-border-style;
border-bottom: $transparent-border-style; border-bottom: $transparent-border-style;
} }
@else if $direction==down { @else if $direction==down {
border-top: $color-border-style; border-top: $color-border-style;
border-left: $transparent-border-style; border-left: $transparent-border-style;
border-right: $transparent-border-style; border-right: $transparent-border-style;
} }
@else if $direction==left { @else if $direction==left {
border-right: $color-border-style; border-right: $color-border-style;
border-top: $transparent-border-style; border-top: $transparent-border-style;
border-bottom: $transparent-border-style; border-bottom: $transparent-border-style;
} }
} }

284
sf-ui/src/assets/styles/ruoyi.scss
View File

@ -1,150 +1,129 @@
/** /**
* 通用css样式布局处理 * 通用css样式布局处理
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
} }
.pr5 { .pr5 {
padding-right: 5px; padding-right: 5px;
} }
.pb5 { .pb5 {
padding-bottom: 5px; padding-bottom: 5px;
} }
.mt5 { .mt5 {
margin-top: 5px; margin-top: 5px;
} }
.mr5 { .mr5 {
margin-right: 5px; margin-right: 5px;
} }
.mb5 { .mb5 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mb8 { .mb8 {
margin-bottom: 8px; margin-bottom: 8px;
} }
.ml5 { .ml5 {
margin-left: 5px; margin-left: 5px;
} }
.mt10 { .mt10 {
margin-top: 10px; margin-top: 10px;
} }
.mr10 { .mr10 {
margin-right: 10px; margin-right: 10px;
} }
.mb10 { .mb10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ml10 { .ml10 {
margin-left: 10px; margin-left: 10px;
} }
.mt20 { .mt20 {
margin-top: 20px; margin-top: 20px;
} }
.mr20 { .mr20 {
margin-right: 20px; margin-right: 20px;
}
.mb14 {
margin-bottom: 14px;
}
.mb16 {
margin-bottom: 16px;
} }
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.ml20 { .ml20 {
margin-left: 20px; margin-left: 20px;
} }
.h1, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
.h2, font-family: inherit;
.h3, font-weight: 500;
.h4, line-height: 1.1;
.h5, color: inherit;
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
} }
.el-message-box__status + .el-message-box__message { .el-message-box__status + .el-message-box__message{
word-break: break-word; word-break: break-word;
} }
.el-dialog:not(.is-fullscreen) { .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 6vh !important;
} }
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
max-height: 70vh; max-height: 70vh;
padding: 10px 20px 0; padding: 10px 20px 0;
} }
.el-table th {
background-color: #f0f0f0; /* 你想要的颜色 */
}
// .has
.el-table { .el-table {
.el-table__header-wrapper, .el-table__header-wrapper, .el-table__fixed-header-wrapper {
.el-table__fixed-header-wrapper { th {
th { word-break: break-word;
word-break: break-word; background-color: #f8f8f9;
background-color: #d4e1ff !important; color: #515a6e;
color: #4169ff; height: 40px;
height: 40px; font-size: 13px;
font-size: 13px; }
} }
} .el-table__body-wrapper {
.el-table__body-wrapper { .el-button [class*="el-icon-"] + span {
.el-button [class*="el-icon-"] + span { margin-left: 1px;
margin-left: 1px; }
} }
}
} }
/** 表单布局 **/ /** 表单布局 **/
.form-header { .form-header {
font-size: 15px; font-size:15px;
color: #6379bb; color:#6379bb;
border-bottom: 1px solid #ddd; border-bottom:1px solid #ddd;
margin: 8px 10px 25px 10px; margin:8px 10px 25px 10px;
padding-bottom: 5px; padding-bottom:5px
} }
/** 表格布局 **/ /** 表格布局 **/
.pagination-container { .pagination-container {
position: relative; position: relative;
height: 25px; height: 25px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 15px; margin-top: 15px;
padding: 10px 20px !important; padding: 10px 20px !important;
} }
/* tree border */ /* tree border */
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid #e5e6e7;
background: #ffffff none; background: #FFFFFF none;
border-radius: 4px; border-radius:4px;
} }
.pagination-container .el-pagination { .pagination-container .el-pagination {
right: 0; right: 0;
position: absolute; position: absolute;
} }
@media (max-width: 768px) { @media ( max-width : 768px) {
.pagination-container .el-pagination > .el-pagination__jump { .pagination-container .el-pagination > .el-pagination__jump {
display: none !important; display: none !important;
} }
@ -154,160 +133,145 @@ h6 {
} }
.el-table .fixed-width .el-button--mini { .el-table .fixed-width .el-button--mini {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
width: inherit; width: inherit;
} }
/** 表格更多操作下拉样式 */ /** 表格更多操作下拉样式 */
.el-table .el-dropdown-link, .el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
.el-table .el-dropdown-selfdefine { cursor: pointer;
cursor: pointer; margin-left: 5px;
margin-left: 5px;
} }
.el-table .el-dropdown, .el-table .el-dropdown, .el-icon-arrow-down {
.el-icon-arrow-down { font-size: 12px;
font-size: 12px;
} }
.el-tree-node__content > .el-checkbox { .el-tree-node__content > .el-checkbox {
margin-right: 8px; margin-right: 8px;
} }
.list-group-striped > .list-group-item { .list-group-striped > .list-group-item {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-radius: 0; border-radius: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.list-group { .list-group {
padding-left: 0px; padding-left: 0px;
list-style: none; list-style: none;
} }
.list-group-item { .list-group-item {
border-bottom: 1px solid #e7eaec; border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec; border-top: 1px solid #e7eaec;
margin-bottom: -1px; margin-bottom: -1px;
padding: 11px 0px; padding: 11px 0px;
font-size: 13px; font-size: 13px;
} }
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
.el-card__header { .el-card__header {
padding: 14px 15px 7px; padding: 14px 15px 7px;
min-height: 40px; min-height: 40px;
} }
.el-card__body { .el-card__body {
padding: 15px 20px 20px 20px; padding: 15px 20px 20px 20px;
} }
.card-box { .card-box {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* button color */ /* button color */
.el-button--cyan.is-active, .el-button--cyan.is-active,
.el-button--cyan:active { .el-button--cyan:active {
background: #20b2aa; background: #20B2AA;
border-color: #20b2aa; border-color: #20B2AA;
color: #ffffff; color: #FFFFFF;
} }
.el-button--cyan:focus, .el-button--cyan:focus,
.el-button--cyan:hover { .el-button--cyan:hover {
background: #48d1cc; background: #48D1CC;
border-color: #48d1cc; border-color: #48D1CC;
color: #ffffff; color: #FFFFFF;
} }
.el-button--cyan { .el-button--cyan {
background-color: #20b2aa; background-color: #20B2AA;
border-color: #20b2aa; border-color: #20B2AA;
color: #ffffff; color: #FFFFFF;
} }
/* text color */ /* text color */
.text-navy { .text-navy {
color: #1ab394; color: #1ab394;
} }
.text-primary { .text-primary {
color: inherit; color: inherit;
} }
.text-success { .text-success {
color: #1c84c6; color: #1c84c6;
} }
.text-info { .text-info {
color: #23c6c8; color: #23c6c8;
} }
.text-warning { .text-warning {
color: #f8ac59; color: #f8ac59;
} }
.text-danger { .text-danger {
color: #ed5565; color: #ed5565;
} }
.text-muted { .text-muted {
color: #888888; color: #888888;
} }
/* image */ /* image */
.img-circle { .img-circle {
border-radius: 50%; border-radius: 50%;
} }
.img-lg { .img-lg {
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
.avatar-upload-preview { .avatar-upload-preview {
position: relative; position: relative;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 200px; width: 200px;
height: 200px; height: 200px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
overflow: hidden; overflow: hidden;
} }
/* 拖拽列样式 */ /* 拖拽列样式 */
.sortable-ghost { .sortable-ghost{
opacity: 0.8; opacity: .8;
color: #fff !important; color: #fff!important;
background: #42b983 !important; background: #42b983!important;
} }
.top-right-btn { .top-right-btn {
position: relative; position: relative;
float: right; float: right;
}
.dropdown-max {
max-width: 600px;
display: flex;
flex-flow: row wrap;
padding-left: 5px;
li {
margin-right: 5px;
white-space: nowrap;
}
}
.el-radio {
margin-right: 20px;
} }

454
sf-ui/src/assets/styles/sidebar.scss
View File

@ -1,227 +1,227 @@
#app { #app {
.main-container { .main-container {
height: 100%; height: 100%;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: $base-sidebar-width; margin-left: $base-sidebar-width;
position: relative; position: relative;
} }
.sidebarHide { .sidebarHide {
margin-left: 0!important; margin-left: 0!important;
} }
.sidebar-container { .sidebar-container {
-webkit-transition: width .28s; -webkit-transition: width .28s;
transition: width 0.28s; transition: width 0.28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
background-color: $base-menu-background; background-color: $base-menu-background;
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0,21,41,.35);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
} }
.scrollbar-wrapper { .scrollbar-wrapper {
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.el-scrollbar__bar.is-vertical { .el-scrollbar__bar.is-vertical {
right: 0px; right: 0px;
} }
.el-scrollbar { .el-scrollbar {
height: 100%; height: 100%;
} }
&.has-logo { &.has-logo {
.el-scrollbar { .el-scrollbar {
height: calc(100% - 50px); height: calc(100% - 50px);
} }
} }
.is-horizontal { .is-horizontal {
display: none; display: none;
} }
a { a {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
.el-menu { .el-menu {
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
} }
.el-menu-item, .el-submenu__title { .el-menu-item, .el-submenu__title {
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
} }
// menu hover // menu hover
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-submenu__title { .el-submenu__title {
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.06) !important;
} }
} }
& .theme-dark .is-active > .el-submenu__title { & .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.06) !important;
} }
} }
& .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item { & .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important; background-color: $base-sub-menu-background !important;
&:hover { &:hover {
background-color: $base-sub-menu-hover !important; background-color: $base-sub-menu-hover !important;
} }
} }
} }
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 54px !important; width: 54px !important;
} }
.main-container { .main-container {
margin-left: 54px; margin-left: 54px;
} }
.submenu-title-noDropdown { .submenu-title-noDropdown {
padding: 0 !important; padding: 0 !important;
position: relative; position: relative;
.el-tooltip { .el-tooltip {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
margin-left: 20px; margin-left: 20px;
} }
} }
} }
.el-submenu { .el-submenu {
overflow: hidden; overflow: hidden;
&>.el-submenu__title { &>.el-submenu__title {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
margin-left: 20px; margin-left: 20px;
} }
} }
} }
.el-menu--collapse { .el-menu--collapse {
.el-submenu { .el-submenu {
&>.el-submenu__title { &>.el-submenu__title {
&>span { &>span {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
} }
} }
} }
} }
} }
.el-menu--collapse .el-menu .el-submenu { .el-menu--collapse .el-menu .el-submenu {
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
} }
// mobile responsive // mobile responsive
.mobile { .mobile {
.main-container { .main-container {
margin-left: 0px; margin-left: 0px;
} }
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform .28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
} }
&.hideSidebar { &.hideSidebar {
.sidebar-container { .sidebar-container {
pointer-events: none; pointer-events: none;
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translate3d(-$base-sidebar-width, 0, 0); transform: translate3d(-$base-sidebar-width, 0, 0);
} }
} }
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
} }
} }
} }
// when menu collapsed // when menu collapsed
.el-menu--vertical { .el-menu--vertical {
&>.el-menu { &>.el-menu {
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
} }
.nest-menu .el-submenu>.el-submenu__title, .nest-menu .el-submenu>.el-submenu__title,
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $subMenuHover // you can use $subMenuHover
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.06) !important;
} }
} }
// the scroll bar appears when the subMenu is too long // the scroll bar appears when the subMenu is too long
>.el-menu--popup { >.el-menu--popup {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
background: #d3dce6; background: #d3dce6;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #99a9bf; background: #99a9bf;
border-radius: 20px; border-radius: 20px;
} }
} }
} }

98
sf-ui/src/assets/styles/transition.scss
View File

@ -1,49 +1,49 @@
// global transition css // global transition css
/* fade */ /* fade */
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.28s; transition: opacity 0.28s;
} }
.fade-enter, .fade-enter,
.fade-leave-active { .fade-leave-active {
opacity: 0; opacity: 0;
} }
/* fade-transform */ /* fade-transform */
.fade-transform--move, .fade-transform--move,
.fade-transform-leave-active, .fade-transform-leave-active,
.fade-transform-enter-active { .fade-transform-enter-active {
transition: all .5s; transition: all .5s;
} }
.fade-transform-enter { .fade-transform-enter {
opacity: 0; opacity: 0;
transform: translateX(-30px); transform: translateX(-30px);
} }
.fade-transform-leave-to { .fade-transform-leave-to {
opacity: 0; opacity: 0;
transform: translateX(30px); transform: translateX(30px);
} }
/* breadcrumb transition */ /* breadcrumb transition */
.breadcrumb-enter-active, .breadcrumb-enter-active,
.breadcrumb-leave-active { .breadcrumb-leave-active {
transition: all .5s; transition: all .5s;
} }
.breadcrumb-enter, .breadcrumb-enter,
.breadcrumb-leave-active { .breadcrumb-leave-active {
opacity: 0; opacity: 0;
transform: translateX(20px); transform: translateX(20px);
} }
.breadcrumb-move { .breadcrumb-move {
transition: all .5s; transition: all .5s;
} }
.breadcrumb-leave-active { .breadcrumb-leave-active {
position: absolute; position: absolute;
} }

108
sf-ui/src/assets/styles/variables.scss
View File

@ -1,54 +1,54 @@
// base color // base color
$blue:#324157; $blue:#324157;
$light-blue:#3A71A8; $light-blue:#3A71A8;
$red:#C03639; $red:#C03639;
$pink: #E65D6E; $pink: #E65D6E;
$green: #30B08F; $green: #30B08F;
$tiffany: #4AB7BD; $tiffany: #4AB7BD;
$yellow:#FEC171; $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#bfcbd9; $base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5; $base-menu-color-active:#f4f4f5;
$base-menu-background:#304156; $base-menu-background:#304156;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff; $base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #001529;
$base-sub-menu-background:#1f2d3d; $base-sub-menu-background:#1f2d3d;
$base-sub-menu-hover:#001528; $base-sub-menu-hover:#001528;
// 自定义暗色菜单风格 // 自定义暗色菜单风格
/** /**
$base-menu-color:hsla(0,0%,100%,.65); $base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff; $base-menu-color-active:#fff;
$base-menu-background:#001529; $base-menu-background:#001529;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff; $base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #001529;
$base-sub-menu-background:#000c17; $base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528; $base-sub-menu-hover:#001528;
*/ */
$base-sidebar-width: 200px; $base-sidebar-width: 200px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export { :export {
menuColor: $base-menu-color; menuColor: $base-menu-color;
menuLightColor: $base-menu-light-color; menuLightColor: $base-menu-light-color;
menuColorActive: $base-menu-color-active; menuColorActive: $base-menu-color-active;
menuBackground: $base-menu-background; menuBackground: $base-menu-background;
menuLightBackground: $base-menu-light-background; menuLightBackground: $base-menu-light-background;
subMenuBackground: $base-sub-menu-background; subMenuBackground: $base-sub-menu-background;
subMenuHover: $base-sub-menu-hover; subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width; sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color; logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color logoLightTitleColor: $base-logo-light-title-color
} }

230
sf-ui/src/components/Crontab/min.vue
View File

@ -1,116 +1,116 @@
<template> <template>
<el-form size="small"> <el-form size="small">
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="1"> <el-radio v-model='radioValue' :label="1">
分钟，允许的通配符[, - * /] 分钟，允许的通配符[, - * /]
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="2"> <el-radio v-model='radioValue' :label="2">
周期从 周期从
<el-input-number v-model='cycle01' :min="0" :max="58" /> - <el-input-number v-model='cycle01' :min="0" :max="58" /> -
<el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 分钟 <el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 分钟
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="3"> <el-radio v-model='radioValue' :label="3">
从 从
<el-input-number v-model='average01' :min="0" :max="58" /> 分钟开始，每 <el-input-number v-model='average01' :min="0" :max="58" /> 分钟开始，每
<el-input-number v-model='average02' :min="1" :max="59 - average01 || 0" /> 分钟执行一次 <el-input-number v-model='average02' :min="1" :max="59 - average01 || 0" /> 分钟执行一次
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model='radioValue' :label="4"> <el-radio v-model='radioValue' :label="4">
指定 指定
<el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%"> <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
<el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option> <el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option>
</el-select> </el-select>
</el-radio> </el-radio>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
radioValue: 1, radioValue: 1,
cycle01: 1, cycle01: 1,
cycle02: 2, cycle02: 2,
average01: 0, average01: 0,
average02: 1, average02: 1,
checkboxList: [], checkboxList: [],
checkNum: this.$options.propsData.check checkNum: this.$options.propsData.check
} }
}, },
name: 'crontab-min', name: 'crontab-min',
props: ['check', 'cron'], props: ['check', 'cron'],
methods: { methods: {
// 单选按钮值变化时 // 单选按钮值变化时
radioChange() { radioChange() {
switch (this.radioValue) { switch (this.radioValue) {
case 1: case 1:
this.$emit('update', 'min', '*', 'min'); this.$emit('update', 'min', '*', 'min');
break; break;
case 2: case 2:
this.$emit('update', 'min', this.cycleTotal, 'min'); this.$emit('update', 'min', this.cycleTotal, 'min');
break; break;
case 3: case 3:
this.$emit('update', 'min', this.averageTotal, 'min'); this.$emit('update', 'min', this.averageTotal, 'min');
break; break;
case 4: case 4:
this.$emit('update', 'min', this.checkboxString, 'min'); this.$emit('update', 'min', this.checkboxString, 'min');
break; break;
} }
}, },
// 周期两个值变化时 // 周期两个值变化时
cycleChange() { cycleChange() {
if (this.radioValue == '2') { if (this.radioValue == '2') {
this.$emit('update', 'min', this.cycleTotal, 'min'); this.$emit('update', 'min', this.cycleTotal, 'min');
} }
}, },
// 平均两个值变化时 // 平均两个值变化时
averageChange() { averageChange() {
if (this.radioValue == '3') { if (this.radioValue == '3') {
this.$emit('update', 'min', this.averageTotal, 'min'); this.$emit('update', 'min', this.averageTotal, 'min');
} }
}, },
// checkbox值变化时 // checkbox值变化时
checkboxChange() { checkboxChange() {
if (this.radioValue == '4') { if (this.radioValue == '4') {
this.$emit('update', 'min', this.checkboxString, 'min'); this.$emit('update', 'min', this.checkboxString, 'min');
} }
}, },
}, },
watch: { watch: {
'radioValue': 'radioChange', 'radioValue': 'radioChange',
'cycleTotal': 'cycleChange', 'cycleTotal': 'cycleChange',
'averageTotal': 'averageChange', 'averageTotal': 'averageChange',
'checkboxString': 'checkboxChange', 'checkboxString': 'checkboxChange',
}, },
computed: { computed: {
// 计算两个周期值 // 计算两个周期值
cycleTotal: function () { cycleTotal: function () {
const cycle01 = this.checkNum(this.cycle01, 0, 58) const cycle01 = this.checkNum(this.cycle01, 0, 58)
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59) const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59)
return cycle01 + '-' + cycle02; return cycle01 + '-' + cycle02;
}, },
// 计算平均用到的值 // 计算平均用到的值
averageTotal: function () { averageTotal: function () {
const average01 = this.checkNum(this.average01, 0, 58) const average01 = this.checkNum(this.average01, 0, 58)
const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0) const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0)
return average01 + '/' + average02; return average01 + '/' + average02;
}, },
// 计算勾选的checkbox值合集 // 计算勾选的checkbox值合集
checkboxString: function () { checkboxString: function () {
let str = this.checkboxList.join(); let str = this.checkboxList.join();
return str == '' ? '*' : str; return str == '' ? '*' : str;
} }
} }
} }
</script> </script>

99
sf-ui/src/components/DictData/index.js
View File

@ -1,50 +1,49 @@
import Vue from 'vue' import Vue from 'vue'
import store from '@/store' import store from '@/store'
import DataDict from '@/utils/dict' import DataDict from '@/utils/dict'
import { getDicts as getDicts } from '@/api/system/dict/data' import { getDicts as getDicts } from '@/api/system/dict/data'
function searchDictByKey (dict, key) { function searchDictByKey(dict, key) {
if (key == null && key == "") { if (key == null && key == "") {
return null return null
} }
try { try {
for (let i = 0; i < dict.length; i++) { for (let i = 0; i < dict.length; i++) {
if (dict[i].key == key) { if (dict[i].key == key) {
return dict[i].value return dict[i].value
} }
} }
} catch (e) { } catch (e) {
return null return null
} }
} }
function install () { function install() {
Vue.use(DataDict, { Vue.use(DataDict, {
metas: { metas: {
'*': { '*': {
labelField: 'dictLabel', labelField: 'dictLabel',
valueField: 'dictValue', valueField: 'dictValue',
request (dictMeta) { request(dictMeta) {
const storeDict = searchDictByKey(store.getters.dict, dictMeta.type) const storeDict = searchDictByKey(store.getters.dict, dictMeta.type)
if (storeDict) { if (storeDict) {
return new Promise(resolve => { resolve(storeDict) }) return new Promise(resolve => { resolve(storeDict) })
} else { } else {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getDicts(dictMeta.type).then(res => { getDicts(dictMeta.type).then(res => {
console.log(res); store.dispatch('dict/setDict', { key: dictMeta.type, value: res.data })
store.dispatch('dict/setDict', { key: dictMeta.type, value: res.data, text: res.data.dictLabel }) resolve(res.data)
resolve(res.data) }).catch(error => {
}).catch(error => { reject(error)
reject(error) })
}) })
}) }
} },
}, },
}, },
}, })
}) }
}
export default {
export default { install,
install, }
}

54
sf-ui/src/components/DictTag/index.vue
View File

@ -5,19 +5,19 @@
<span <span
v-if="item.raw.listClass == 'default' || item.raw.listClass == ''" v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
:key="item.value" :key="item.value"
:index="index"
:class="item.raw.cssClass" :class="item.raw.cssClass"
>{{ item.label + " " }}</span :index="index"
>{{ item.label + ' ' }}</span
> >
<el-tag <el-tag
v-else v-else
:disable-transitions="true"
:key="item.value" :key="item.value"
:class="item.raw.cssClass"
:disable-transitions="true"
:index="index" :index="index"
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass" :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
:class="item.raw.cssClass"
> >
{{ item.label + " " }} {{ item.label + ' ' }}
</el-tag> </el-tag>
</template> </template>
</template> </template>
@ -29,61 +29,63 @@
<script> <script>
export default { export default {
name: "DictTag", name: 'DictTag',
props: { props: {
options: { options: {
type: Array, type: Array,
default: null, default: null
}, },
value: [Number, String, Array], value: [Number, String, Array],
// 当未找到匹配的数据时，显示value // 当未找到匹配的数据时，显示value
showValue: { showValue: {
type: Boolean, type: Boolean,
default: true, default: true
} }
}, },
data() { data() {
return { return {
unmatchArray: [], // 记录未匹配的项 unmatchArray: [] // 记录未匹配的项
} }
}, },
computed: { computed: {
values() { values() {
if (this.value !== null && typeof this.value !== "undefined") { if (this.value !== null && typeof this.value !== 'undefined') {
return Array.isArray(this.value) ? this.value : [String(this.value)]; console.log(this.value)
return Array.isArray(this.value) ? this.value : [String(this.value)]
} else { } else {
return []; return []
} }
}, },
unmatch() { unmatch() {
this.unmatchArray = []; this.unmatchArray = []
if (this.value !== null && typeof this.value !== "undefined") { if (this.value !== null && typeof this.value !== 'undefined') {
// 传入值为非数组 // 传入值为非数组
if (!Array.isArray(this.value)) { if (!Array.isArray(this.value)) {
if (this.options.some((v) => v.value == this.value)) return false; if (this.options.some((v) => v.value == this.value)) return false
this.unmatchArray.push(this.value); this.unmatchArray.push(this.value)
return true; return true
} }
// 传入值为Array // 传入值为Array
this.value.forEach((item) => { this.value.forEach((item) => {
if (!this.options.some((v) => v.value == item)) if (!this.options.some((v) => v.value == item)) {
this.unmatchArray.push(item); this.unmatchArray.push(item)
}); }
return true; })
return true
} }
// 没有value不显示 // 没有value不显示
return false; return false
}, }
}, },
filters: { filters: {
handleArray(array) { handleArray(array) {
if (array.length === 0) return ""; if (array.length === 0) return ''
return array.reduce((pre, cur) => { return array.reduce((pre, cur) => {
return pre + " " + cur; return pre + ' ' + cur
}) })
} }
} }
}; }
</script> </script>
<style scoped> <style scoped>
.el-tag + .el-tag { .el-tag + .el-tag {

79
sf-ui/src/components/DropDown/MyDropDown.vue
View File

@ -1,79 +0,0 @@
<template>
<div     class="my-dropdown"     @click.stop="trigger == 'click' ? (showMenu = !showMenu) : ''"
    @mouseenter="trigger == 'hover' ? (showMenu = true) : ''"
    @mouseleave="trigger == 'hover' ? (showMenu = false) : ''"     ref="myDropDdown"   >
    <div class="tip-text" ref="tipText">
      <slot></slot>
    </div>
    <slot name="list"></slot>
  </div>
</template>
<script>
import emitter from "./emitter";
export default {
name: "MyDropdown",
componentName: "MyDropdown",
mixins: [emitter],
props: {
// 触发显示方式
trigger: {
type: String,
default: "click",
},
// 下来菜单的出现位置（上方，下方）
placement: {
type: String,
default: "bottom",
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ["bottom", "top"].includes(value);
},
},
},
data () {
return {
//控制菜单是否显示
showMenu: false,
};
},
mounted () {
//初始化自定义事件
this.initEvent();
},
methods: {
// 初始化
initEvent () {
//订阅当item点击的时候，发布on-click事件，告知外部
this.$on("item-click", (params) => {
this.$emit("on-click", params);
this.showMenu = false;
});
//空白点击要隐藏菜单，需要执行的函数需要绑定this指向
this.handleEmptyDomElementClickBindThis =
this.handleEmptyDomElementClick.bind(this);
window.addEventListener("click", this.handleEmptyDomElementClickBindThis);
},
// 处理空白区域点击，隐藏菜单列表
handleEmptyDomElementClick (e) {
if (!Array.from(this.$refs.myDropDdown.childNodes).includes(e.target)) {
this.showMenu = false;
}
},
},
beforeDestroy () {
// 移除window上面的事件
window.removeEventListener(this.handleEmptyDomElementClickBindThis);
},
watch: {
//变化的时候，通知子组件隐藏菜单列表
showMenu () {
this.broadcast("MyDropdownMenu", "set-menu-status", this.showMenu);
},
},
};
</script>
<style lang="scss" scoped>
.my-dropdown {
position: relative;
}
</style>

75
sf-ui/src/components/DropDown/MyDropDownItem.vue
View File

@ -1,75 +0,0 @@
<template>
<div     :class="[
      'my-dropdownItem',
      divided ? 'my-dropdownItem-divided' : '',
      disabled ? 'my-dropdownItem-disabled' : '',
    ]"     @click.stop="handleItemClick"   >
    <slot></slot>
  </div>
</template>
<script>
import emitter from "./emitter";
export default {
name: "MyDropdownItem",
componentName: "MyDropdownItem",
mixins: [emitter],
props: {
divided: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
name: {
type: String,
default: "",
},
},
data () {
return {};
},
methods: {
handleItemClick () {
if (this.disabled) return;
// item项点击通知dropdown组件派发到外部的自定义事件
this.dispatch("MyDropdown", "item-click", this.name);
},
},
};
</script>
<style lang="scss" scoped>
.my-dropdownItem {
margin: 0;
line-height: normal;
padding: 7px 16px;
clear: both;
color: #515a6e;
font-size: 14px !important;
white-space: nowrap;
list-style: none;
cursor: pointer;
transition: background 0.2s ease-in-out;
&:hover {
background: #f3f3f3;
}
}
.my-dropdownItem-divided {
border-bottom: 1px solid #eee
}
.my-dropdownItem-disabled {
color: #cacdd2;
cursor: not-allowed;
&:hover {
background: #fff;
}
}
</style>

96
sf-ui/src/components/DropDown/MyDropDownMenu.vue
View File

@ -1,96 +0,0 @@
<template>
<!-- 涉及到高度，位移，过渡使用js钩子函数的方式比较好处理些 -->
  <transition @before-enter="beforeEnter" @enter="enter" @leave="leave"     v-bind:css="false">
<div class="my-dropdown-menu" v-if="showMenue" ref="myDroupdownMenu">
<slot></slot>
</div>
</transition>
</template>
<script>
import emitter from "./emitter";
export default {
name: "MyDropdownMenu",
componentName: "MyDropdownMenu",
mixins: [emitter],
data () {
return {
showMeune: false,
timer: null,
};
},
mounted () {
this.$on("set-menu-status", (status) => {
this.showMeune = status;
});
},
methods: {
//进入前，初始化需要过渡的属性
beforeEnter: function (el) {
// 初始化
el.style.opacity = 0;
el.style.transform = "scaleY(0)";
el.style.transformOrigin = "top center";
},
//dom进入
enter: function (el, done) {
console.log(el);
//获取文档可视区高度
const htmlClientHeight = document.documentElement.clientHeight;
//菜单列表相对于父元素的top偏移量
const offsetTop = el.offsetTop;
const scrollHeight = el.scrollHeight;
//获取当前元素和可视区的一些长度（top,left,bottom等）
const { bottom } = el.getBoundingClientRect();
// 说明底部高度不够显示菜单了,这时候我们需要调整菜单朝上面显示
if (htmlClientHeight - bottom < scrollHeight) {
el.style.transformOrigin = "bottom center";
el.style.top = -(scrollHeight + 20) + "px";
} else {
//查看是否placement属性，是的话我们主动处理
if (this.$parent.placement == "top") {
el.style.transformOrigin = "bottom center";
el.style.top = -(scrollHeight + 20) + "px";
} else {
el.style.top = offsetTop + "px";
}
}
el.style.transform = "scaleY(1)";
el.style.opacity = 1;
//根据官网事例，必须在enter和leave里面调用done函数，不然过渡动画不生效（切记）
done();
},
//dom元素离开 
leave: function (el, done) {
el.style.transform = "scaleY(0)";
el.style.opacity = 0;
clearTimeout(this.timer);
this.timer = setTimeout(() => {
//根据官网事例，必须在enter和leave里面调用done函数，不然过渡动画不生效（切记）
done();
}, 250);
},
},
};
</script>
<style lang="scss" scoped>
.my-dropdown-menu {
min-width: 100px;
max-height: 200px;
overflow: auto;
margin: 5px 0;
padding: 5px 0;
background-color: #fff;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
z-index: 999;
transform-origin: top center;
position: absolute;
transition: transform .25s ease, opacity 0.25s ease;
}
</style>

45
sf-ui/src/components/DropDown/emitter.js
View File

@ -1,45 +0,0 @@
/**
* @Description 由于涉及到跨组件之间通信，因此我们只有自己实现发布订阅的模式，来实现组件之间通信,灵感主要来源于element-ui组件库源码中跨层级父子组件通信方案，本质上也是发布订阅和$emit和$on
* @param { String } componentName 组件名
* @param { String } eventName 事件名
* @param { argument } params 参数
**/
// 广播通知事件
function _broadcast (componentName, eventName, params) {
// 遍历当前组件的子组件
this.$children.forEach(function (child) {
// 取出componentName,组件options上面可以自己配置
var name = child.$options.componentName;
// 如果找到了需要通知的组件名，触发组件上面的$eimit方法，触发自定义事件
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
// 没找到，递归往下找
_broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
const emiiter = {
methods: {
// 派发事件（通知父组件）
dispatch (componentName, eventName, params) {
var parent = this.$parent || this.$root;
var name = parent.$options.componentName;
// 循环往上层父组件，知道知道组件名和需要触发的组件名相同即可，然后触发对应组件的事件
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.componentName;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
// 广播事件（通知子组件）
broadcast (componentName, eventName, params) {
_broadcast.call(this, componentName, eventName, params);
},
},
};
export default emiiter;

60
sf-ui/src/components/FileUpload/index.vue
View File

@ -2,7 +2,7 @@
<div class="upload-file"> <div class="upload-file">
<el-upload <el-upload
ref="fileUpload" ref="fileUpload"
:accept="suffixArr.join(',')" :accept="accept"
:action="baseUrl+uploadFileUrl" :action="baseUrl+uploadFileUrl"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:file-list="fileList" :file-list="fileList"
@ -13,17 +13,16 @@
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
:show-file-list="false" :show-file-list="false"
class="upload-file-uploader" class="upload-file-uploader"
:multiple="multiple" multiple
> >
<!-- 上传按钮 --> <!-- 上传按钮 -->
<el-button size="mini" type="default" icon="el-icon-upload2">选取文件</el-button> <el-button size="mini" type="primary">选取文件</el-button>
<!-- 上传提示 --> <!-- 上传提示 -->
<div v-if="showTip" slot="tip" class="el-upload__tip"> <div v-if="showTip" slot="tip" class="el-upload__tip">
<!-- 请上传 请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template> <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template> <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template>
的文件 --> 的文件
<span style="color: #999;">支持扩展名：{{ suffixArr.join(' ') }}...</span>
</div> </div>
</el-upload> </el-upload>
@ -31,7 +30,7 @@
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li v-for="(file, index) in fileList" :key="file.url" class="el-upload-list__item ele-upload-list__item-content"> <li v-for="(file, index) in fileList" :key="file.url" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank"> <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file) }} </span> <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link> </el-link>
<div class="ele-upload-list__item-content-action"> <div class="ele-upload-list__item-content-action">
<el-link :underline="false" type="danger" @click="handleDelete(index)">删除</el-link> <el-link :underline="false" type="danger" @click="handleDelete(index)">删除</el-link>
@ -73,12 +72,12 @@ export default {
type: String, type: String,
default: () => '/system/oss/zip/upload' default: () => '/system/oss/zip/upload'
}, },
multiple: { accept: {
type: Boolean, type: Array,
default: true default: () => []
} }
}, },
data () { data() {
return { return {
number: 0, number: 0,
uploadList: [], uploadList: [],
@ -92,9 +91,8 @@ export default {
}, },
watch: { watch: {
value: { value: {
handler (val) { handler(val) {
if (val) { if (val) {
console.log(val)
let temp = 1 let temp = 1
// 首先将值转为数组 // 首先将值转为数组
const list = Array.isArray(val) ? val : this.value.split(',') const list = Array.isArray(val) ? val : this.value.split(',')
@ -117,23 +115,18 @@ export default {
}, },
computed: { computed: {
// 是否显示提示 // 是否显示提示
showTip () { showTip() {
return this.isShowTip && (this.fileType || this.fileSize) return this.isShowTip && (this.fileType || this.fileSize)
},
suffixArr() {
return this.fileType.map(item => {
return `.${item}`
})
} }
}, },
methods: { methods: {
// 上传前校检格式和大小 // 上传前校检格式和大小
handleBeforeUpload (file) { handleBeforeUpload(file) {
// 校检文件类型 // 校检文件类型
if (this.fileType) { if (this.fileType) {
const fileName = file.name.split('.') const fileName = file.name.split('.')
const fileExt = fileName[fileName.length - 1] const fileExt = fileName[fileName.length - 1]
const isTypeOk = this.fileType.indexOf(fileExt.toLocaleUpperCase()) >= 0 || this.fileType.indexOf(fileExt.toLocaleLowerCase()) >= 0 const isTypeOk = this.fileType.indexOf(fileExt) >= 0
if (!isTypeOk) { if (!isTypeOk) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`) this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
return false return false
@ -152,21 +145,19 @@ export default {
return true return true
}, },
// 文件个数超出 // 文件个数超出
handleExceed () { handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`) this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
}, },
// 上传失败 // 上传失败
handleUploadError (err) { handleUploadError(err) {
this.$modal.msgError('上传文件失败，请重试') this.$modal.msgError('上传文件失败，请重试')
this.$modal.closeLoading() this.$modal.closeLoading()
}, },
// 上传成功回调 // 上传成功回调
handleUploadSuccess (res, file) { handleUploadSuccess(res, file) {
if (res.code === 200) { if (res.code === 200) {
const { data } = res; this.uploadList.push({ name: res.data.url, url: res.data.url, size: res.data.size })
data.name = data.url;
this.uploadList.push(data)
this.uploadedSuccessfully() this.uploadedSuccessfully()
} else { } else {
this.number-- this.number--
@ -177,28 +168,23 @@ export default {
} }
}, },
// 删除文件 // 删除文件
handleDelete (index) { handleDelete(index) {
this.fileList.splice(index, 1) this.fileList.splice(index, 1)
this.$emit('input', this.listToString(this.fileList)) this.$emit('input', this.listToString(this.fileList))
this.$emit('change', this.fileList)
this.$emit('getSize', this.fileList)
}, },
// 上传结束处理 // 上传结束处理
uploadedSuccessfully () { uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) { if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList) this.fileList = this.fileList.concat(this.uploadList)
this.uploadList = [] this.uploadList = []
this.number = 0 this.number = 0
this.$emit('input', this.listToString(this.fileList)) this.$emit('input', this.listToString(this.fileList))
this.$emit('change', this.fileList)
this.$emit('getSize', this.fileList) this.$emit('getSize', this.fileList)
this.$modal.closeLoading() this.$modal.closeLoading()
} }
}, },
// 获取文件名称 // 获取文件名称
getFileName(file) { getFileName(name) {
const {name, originalName} = file;
if (originalName) return originalName;
if (name.lastIndexOf('/') > -1) { if (name.lastIndexOf('/') > -1) {
return name.slice(name.lastIndexOf('/') + 1) return name.slice(name.lastIndexOf('/') + 1)
} else { } else {
@ -206,7 +192,7 @@ export default {
} }
}, },
// 对象转成指定字符串分隔 // 对象转成指定字符串分隔
listToString (list, separator) { listToString(list, separator) {
let strs = '' let strs = ''
separator = separator || ',' separator = separator || ','
for (let i in list) { for (let i in list) {

88
sf-ui/src/components/Hamburger/index.vue
View File

@ -1,44 +1,44 @@
<template> <template>
<div style="padding: 0 15px;" @click="toggleClick"> <div style="padding: 0 15px;" @click="toggleClick">
<svg <svg
:class="{'is-active':isActive}" :class="{'is-active':isActive}"
class="hamburger" class="hamburger"
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="64" width="64"
height="64" height="64"
> >
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg> </svg>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Hamburger', name: 'Hamburger',
props: { props: {
isActive: { isActive: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
methods: { methods: {
toggleClick() { toggleClick() {
this.$emit('toggleClick') this.$emit('toggleClick')
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.hamburger { .hamburger {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.hamburger.is-active { .hamburger.is-active {
transform: rotate(180deg); transform: rotate(180deg);
} }
</style> </style>

378
sf-ui/src/components/HeaderSearch/index.vue
View File

@ -1,189 +1,189 @@
<template> <template>
<div :class="{'show':show}" class="header-search"> <div :class="{'show':show}" class="header-search">
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
<el-select <el-select
ref="headerSearchSelect" ref="headerSearchSelect"
v-model="search" v-model="search"
:remote-method="querySearch" :remote-method="querySearch"
filterable filterable
default-first-option default-first-option
remote remote
placeholder="Search" placeholder="Search"
class="header-search-select" class="header-search-select"
@change="change" @change="change"
> >
<el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" /> <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
</el-select> </el-select>
</div> </div>
</template> </template>
<script> <script>
// fuse is a lightweight fuzzy-search module // fuse is a lightweight fuzzy-search module
// make search results more in line with expectations // make search results more in line with expectations
import Fuse from 'fuse.js/dist/fuse.min.js' import Fuse from 'fuse.js/dist/fuse.min.js'
import path from 'path' import path from 'path'
export default { export default {
name: 'HeaderSearch', name: 'HeaderSearch',
data() { data() {
return { return {
search: '', search: '',
options: [], options: [],
searchPool: [], searchPool: [],
show: false, show: false,
fuse: undefined fuse: undefined
} }
}, },
computed: { computed: {
routes() { routes() {
return this.$store.getters.permission_routes return this.$store.getters.permission_routes
} }
}, },
watch: { watch: {
routes() { routes() {
this.searchPool = this.generateRoutes(this.routes) this.searchPool = this.generateRoutes(this.routes)
}, },
searchPool(list) { searchPool(list) {
this.initFuse(list) this.initFuse(list)
}, },
show(value) { show(value) {
if (value) { if (value) {
document.body.addEventListener('click', this.close) document.body.addEventListener('click', this.close)
} else { } else {
document.body.removeEventListener('click', this.close) document.body.removeEventListener('click', this.close)
} }
} }
}, },
mounted() { mounted() {
this.searchPool = this.generateRoutes(this.routes) this.searchPool = this.generateRoutes(this.routes)
}, },
methods: { methods: {
click() { click() {
this.show = !this.show this.show = !this.show
if (this.show) { if (this.show) {
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus() this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
} }
}, },
close() { close() {
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur() this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
this.options = [] this.options = []
this.show = false this.show = false
}, },
change(val) { change(val) {
const path = val.path; const path = val.path;
if(this.ishttp(val.path)) { if(this.ishttp(val.path)) {
// http(s):// 路径新窗口打开 // http(s):// 路径新窗口打开
const pindex = path.indexOf("http"); const pindex = path.indexOf("http");
window.open(path.substr(pindex, path.length), "_blank"); window.open(path.substr(pindex, path.length), "_blank");
} else { } else {
this.$router.push(val.path) this.$router.push(val.path)
} }
this.search = '' this.search = ''
this.options = [] this.options = []
this.$nextTick(() => { this.$nextTick(() => {
this.show = false this.show = false
}) })
}, },
initFuse(list) { initFuse(list) {
this.fuse = new Fuse(list, { this.fuse = new Fuse(list, {
shouldSort: true, shouldSort: true,
threshold: 0.4, threshold: 0.4,
location: 0, location: 0,
distance: 100, distance: 100,
minMatchCharLength: 1, minMatchCharLength: 1,
keys: [{ keys: [{
name: 'title', name: 'title',
weight: 0.7 weight: 0.7
}, { }, {
name: 'path', name: 'path',
weight: 0.3 weight: 0.3
}] }]
}) })
}, },
// Filter out the routes that can be displayed in the sidebar // Filter out the routes that can be displayed in the sidebar
// And generate the internationalized title // And generate the internationalized title
generateRoutes(routes, basePath = '/', prefixTitle = []) { generateRoutes(routes, basePath = '/', prefixTitle = []) {
let res = [] let res = []
for (const router of routes) { for (const router of routes) {
// skip hidden router // skip hidden router
if (router.hidden) { continue } if (router.hidden) { continue }
const data = { const data = {
path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path, path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
title: [...prefixTitle] title: [...prefixTitle]
} }
if (router.meta && router.meta.title) { if (router.meta && router.meta.title) {
data.title = [...data.title, router.meta.title] data.title = [...data.title, router.meta.title]
if (router.redirect !== 'noRedirect') { if (router.redirect !== 'noRedirect') {
// only push the routes with title // only push the routes with title
// special case: need to exclude parent router without redirect // special case: need to exclude parent router without redirect
res.push(data) res.push(data)
} }
} }
// recursive child routes // recursive child routes
if (router.children) { if (router.children) {
const tempRoutes = this.generateRoutes(router.children, data.path, data.title) const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
if (tempRoutes.length >= 1) { if (tempRoutes.length >= 1) {
res = [...res, ...tempRoutes] res = [...res, ...tempRoutes]
} }
} }
} }
return res return res
}, },
querySearch(query) { querySearch(query) {
if (query !== '') { if (query !== '') {
this.options = this.fuse.search(query) this.options = this.fuse.search(query)
} else { } else {
this.options = [] this.options = []
} }
}, },
ishttp(url) { ishttp(url) {
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1 return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-search { .header-search {
font-size: 0 !important; font-size: 0 !important;
.search-icon { .search-icon {
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
vertical-align: middle; vertical-align: middle;
} }
.header-search-select { .header-search-select {
font-size: 18px; font-size: 18px;
transition: width 0.2s; transition: width 0.2s;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
background: transparent; background: transparent;
border-radius: 0; border-radius: 0;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
::v-deep .el-input__inner { ::v-deep .el-input__inner {
border-radius: 0; border-radius: 0;
border: 0; border: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
box-shadow: none !important; box-shadow: none !important;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
vertical-align: middle; vertical-align: middle;
} }
} }
&.show { &.show {
.header-search-select { .header-search-select {
width: 210px; width: 210px;
margin-left: 10px; margin-left: 10px;
} }
} }
} }
</style> </style>

22
sf-ui/src/components/IconSelect/requireIcons.js
View File

@ -1,11 +1,11 @@
const req = require.context('../../assets/icons/svg', false, /\.svg$/) const req = require.context('../../assets/icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys() const requireAll = requireContext => requireContext.keys()
const re = /\.\/(.*)\.svg/ const re = /\.\/(.*)\.svg/
const icons = requireAll(req).map(i => { const icons = requireAll(req).map(i => {
return i.match(re)[1] return i.match(re)[1]
}) })
export default icons export default icons

465
sf-ui/src/components/ImageUpload/index.vue
View File

@ -1,223 +1,242 @@
<template> <template>
<div class="component-upload-image"> <div class="component-upload-image">
<el-upload ref="imageUpload" :action="baseUrl + uploadImgUrl" :before-upload="handleBeforeUpload" <el-upload
:class="{ hide: this.fileList.length >= this.limit }" :file-list="fileList" :headers="headers" :accept="accept" ref="imageUpload"
:limit="limit" :list-type="listType" :on-error="handleUploadError" :on-exceed="handleExceed" :action="baseUrl+uploadImgUrl"
:on-preview="handlePictureCardPreview" :on-remove="handleDelete" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload"
:show-file-list="true" multiple> :class="{hide: this.fileList.length >= this.limit}"
<i v-if="listType == 'picture-card'" class="el-icon-plus"></i> :file-list="fileList"
<el-button v-else icon="el-icon-upload" size="small" type="primary">上传文件</el-button> :headers="headers"
</el-upload> :limit="limit"
:list-type="listType"
<!-- 上传提示 --> :on-error="handleUploadError"
<div v-if="showTip" slot="tip" class="el-upload__tip"> :on-exceed="handleExceed"
请上传<template v-if="fileSize">大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template> :on-preview="handlePictureCardPreview"
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template> :on-remove="handleDelete"
的文件 :on-success="handleUploadSuccess"
</div> :show-file-list="true"
multiple
<el-dialog :visible.sync="dialogVisible" append-to-body title="预览" width="800"> >
<img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" /> <i v-if="listType=='picture-card'" class="el-icon-plus"></i>
</el-dialog> <el-button v-else icon="el-icon-upload" size="small" type="primary">上传文件</el-button>
</div> </el-upload>
</template>
<!-- 上传提示 -->
<script> <div v-if="showTip" slot="tip" class="el-upload__tip">
import { getToken } from '@/utils/auth' 请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
export default { <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template>
props: { 的文件
value: [String, Object, Array], </div>
// 图片数量限制
limit: { <el-dialog
type: Number, :visible.sync="dialogVisible"
default: 5 append-to-body
}, title="预览"
// 大小限制(MB) width="800"
fileSize: { >
type: Number, <img
default: 5 :src="dialogImageUrl"
}, style="display: block; max-width: 100%; margin: 0 auto"
// 文件类型, 例如['png', 'jpg', 'jpeg'] />
fileType: { </el-dialog>
type: Array, </div>
default: () => ['png', 'jpg', 'jpeg'] </template>
},
listType: { <script>
type: String, import { getToken } from '@/utils/auth'
default: 'picture-card'
}, export default {
// 是否显示提示 props: {
isShowTip: { value: [String, Object, Array],
type: Boolean, // 图片数量限制
default: true limit: {
}, type: Number,
uploadImgUrl: { default: 5
type: String, },
default: () => '/system/oss/upload' // 大小限制(MB)
}, fileSize: {
accept: { type: Number,
type: String, default: 5
default: () => ".png,.jpg,.jpeg" },
} // 文件类型, 例如['png', 'jpg', 'jpeg']
}, fileType: {
data () { type: Array,
return { default: () => ['png', 'jpg', 'jpeg']
number: 0, },
uploadList: [], listType: {
dialogImageUrl: '', type: String,
dialogVisible: false, default: 'picture-card'
hideUpload: false, },
baseUrl: process.env.VUE_APP_BASE_API, // 是否显示提示
// uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址 isShowTip: {
headers: { type: Boolean,
Authorization: 'Bearer ' + getToken() default: true
}, },
fileList: [] uploadImgUrl: {
} type: String,
}, default: () => '/system/oss/upload'
watch: { }
value: { },
handler (val) { data() {
if (val) { return {
// 首先将值转为数组 number: 0,
const list = Array.isArray(val) ? val : this.value.split(',') uploadList: [],
// 然后将数组转为对象数组 dialogImageUrl: '',
this.fileList = list.map(item => { dialogVisible: false,
if (typeof item === 'string') { hideUpload: false,
if (item.indexOf(this.baseUrl) === -1) { baseUrl: process.env.VUE_APP_BASE_API,
item = { name: item, url: item } // uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
} else { headers: {
item = { name: item, url: item } Authorization: 'Bearer ' + getToken()
} },
} fileList: []
return item }
}) },
} else { watch: {
this.fileList = [] value: {
return [] handler(val) {
} if (val) {
}, // 首先将值转为数组
deep: true, const list = Array.isArray(val) ? val : this.value.split(',')
immediate: true // 然后将数组转为对象数组
} this.fileList = list.map(item => {
}, if (typeof item === 'string') {
computed: { console.log(333333)
// 是否显示提示 if (item.indexOf(this.baseUrl) === -1) {
showTip () { item = { name: item, url: item }
return this.isShowTip && (this.fileType || this.fileSize) console.log(item)
} } else {
}, console.log(7777)
methods: { item = { name: item, url: item }
// 上传前loading加载 }
handleBeforeUpload (file) { }
let isImg = false return item
if (this.fileType.length) { })
let fileExtension = '' } else {
if (file.name.lastIndexOf('.') > -1) { this.fileList = []
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1) return []
} }
isImg = this.fileType.some(type => { },
if (file.type.indexOf(type) > -1) return true deep: true,
if (fileExtension && fileExtension.indexOf(type) > -1) return true immediate: true
return false }
}) },
} else { computed: {
isImg = file.type.indexOf('image') > -1 // 是否显示提示
} showTip() {
return this.isShowTip && (this.fileType || this.fileSize)
if (!isImg) { }
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`) },
return false methods: {
} // 上传前loading加载
if (this.fileSize) { handleBeforeUpload(file) {
const isLt = file.size / 1024 / 1024 < this.fileSize let isImg = false
if (!isLt) { if (this.fileType.length) {
this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`) let fileExtension = ''
return false if (file.name.lastIndexOf('.') > -1) {
} fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
} }
this.$modal.loading('正在上传图片，请稍候...') isImg = this.fileType.some(type => {
this.number++ if (file.type.indexOf(type) > -1) return true
}, if (fileExtension && fileExtension.indexOf(type) > -1) return true
// 文件个数超出 return false
handleExceed () { })
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`) } else {
}, isImg = file.type.indexOf('image') > -1
// 上传成功回调 }
handleUploadSuccess (res, file) {
if (res.code === 200) { if (!isImg) {
this.uploadList.push({ name: res.data.url, url: res.data.url, size: res.fileSize }) this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`)
this.uploadedSuccessfully() return false
} else { }
this.number-- if (this.fileSize) {
this.$modal.closeLoading() const isLt = file.size / 1024 / 1024 < this.fileSize
this.$modal.msgError(res.msg) if (!isLt) {
this.$refs.imageUpload.handleRemove(file) this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`)
this.uploadedSuccessfully() return false
} }
}, }
// 删除图片 this.$modal.loading('正在上传图片，请稍候...')
handleDelete (file) { this.number++
const findex = this.fileList.map(f => f.name).indexOf(file.name) },
if (findex > -1) { // 文件个数超出
this.fileList.splice(findex, 1) handleExceed() {
this.$emit('input', this.listToString(this.fileList)) this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
} },
}, // 上传成功回调
// 上传失败 handleUploadSuccess(res, file) {
handleUploadError () { if (res.code === 200) {
this.$modal.msgError('上传图片失败，请重试') this.uploadList.push({ name: res.data.url, url: res.data.url, size: res.fileSize })
this.$modal.closeLoading() this.uploadedSuccessfully()
}, } else {
// 上传结束处理 this.number--
uploadedSuccessfully () { this.$modal.closeLoading()
if (this.number > 0 && this.uploadList.length === this.number) { this.$modal.msgError(res.msg)
this.fileList = this.fileList.concat(this.uploadList) this.$refs.imageUpload.handleRemove(file)
console.log(this.fileList, '313211321312') this.uploadedSuccessfully()
this.uploadList = [] }
this.number = 0 },
console.log(this.listToString(this.fileList)) // 删除图片
this.$emit('input', this.listToString(this.fileList)) handleDelete(file) {
this.$modal.closeLoading() const findex = this.fileList.map(f => f.name).indexOf(file.name)
} if (findex > -1) {
}, this.fileList.splice(findex, 1)
// 预览 this.$emit('input', this.listToString(this.fileList))
handlePictureCardPreview (file) { }
this.dialogImageUrl = file.url },
this.dialogVisible = true // 上传失败
}, handleUploadError() {
// 对象转成指定字符串分隔 this.$modal.msgError('上传图片失败，请重试')
listToString (list, separator) { this.$modal.closeLoading()
let strs = '' },
separator = separator || ',' // 上传结束处理
for (let i in list) { uploadedSuccessfully() {
if (list[i].url) { if (this.number > 0 && this.uploadList.length === this.number) {
strs += list[i].url this.fileList = this.fileList.concat(this.uploadList)
// strs += list[i].url.replace(this.baseUrl, '') + separator console.log(this.fileList, '313211321312')
} this.uploadList = []
} this.number = 0
return strs != '' ? strs : '' console.log(this.listToString(this.fileList))
} this.$emit('input', this.listToString(this.fileList))
} this.$modal.closeLoading()
} }
</script> },
<style lang="scss" scoped> // 预览
// .el-upload--picture-card 控制加号部分 handlePictureCardPreview(file) {
::v-deep.hide .el-upload--picture-card { this.dialogImageUrl = file.url
display: none; this.dialogVisible = true
} },
// 对象转成指定字符串分隔
// 去掉动画效果 listToString(list, separator) {
::v-deep .el-list-enter-active, let strs = ''
::v-deep .el-list-leave-active { separator = separator || ','
transition: all 0s; for (let i in list) {
} if (list[i].url) {
strs += list[i].url
::v-deep .el-list-enter, // strs += list[i].url.replace(this.baseUrl, '') + separator
.el-list-leave-active { }
opacity: 0; }
transform: translateY(0); return strs != '' ? strs : ''
} }
</style> }
}
</script>
<style lang="scss" scoped>
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {
display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
transition: all 0s;
}
::v-deep .el-list-enter, .el-list-leave-active {
opacity: 0;
transform: translateY(0);
}
</style>

228
sf-ui/src/components/Pagination/index.vue
View File

@ -1,114 +1,114 @@
<template> <template>
<div :class="{'hidden':hidden}" class="pagination-container"> <div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination <el-pagination
:background="background" :background="background"
:current-page.sync="currentPage" :current-page.sync="currentPage"
:page-size.sync="pageSize" :page-size.sync="pageSize"
:layout="layout" :layout="layout"
:page-sizes="pageSizes" :page-sizes="pageSizes"
:pager-count="pagerCount" :pager-count="pagerCount"
:total="total" :total="total"
v-bind="$attrs" v-bind="$attrs"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/> />
</div> </div>
</template> </template>
<script> <script>
import { scrollTo } from '@/utils/scroll-to' import { scrollTo } from '@/utils/scroll-to'
export default { export default {
name: 'Pagination', name: 'Pagination',
props: { props: {
total: { total: {
required: true, required: true,
type: Number type: Number
}, },
page: { page: {
type: Number, type: Number,
default: 1 default: 1
}, },
limit: { limit: {
type: Number, type: Number,
default: 20 default: 20
}, },
pageSizes: { pageSizes: {
type: Array, type: Array,
default() { default() {
return [10, 20, 30, 50] return [10, 20, 30, 50]
} }
}, },
// 移动端页码按钮的数量端默认值5 // 移动端页码按钮的数量端默认值5
pagerCount: { pagerCount: {
type: Number, type: Number,
default: document.body.clientWidth < 992 ? 5 : 7 default: document.body.clientWidth < 992 ? 5 : 7
}, },
layout: { layout: {
type: String, type: String,
default: 'total, sizes, prev, pager, next, jumper' default: 'total, sizes, prev, pager, next, jumper'
}, },
background: { background: {
type: Boolean, type: Boolean,
default: true default: true
}, },
autoScroll: { autoScroll: {
type: Boolean, type: Boolean,
default: true default: true
}, },
hidden: { hidden: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
data() { data() {
return { return {
}; };
}, },
computed: { computed: {
currentPage: { currentPage: {
get() { get() {
return this.page return this.page
}, },
set(val) { set(val) {
this.$emit('update:page', val) this.$emit('update:page', val)
} }
}, },
pageSize: { pageSize: {
get() { get() {
return this.limit return this.limit
}, },
set(val) { set(val) {
this.$emit('update:limit', val) this.$emit('update:limit', val)
} }
} }
}, },
methods: { methods: {
handleSizeChange(val) { handleSizeChange(val) {
if (this.currentPage * val > this.total) { if (this.currentPage * val > this.total) {
this.currentPage = 1 this.currentPage = 1
} }
this.$emit('pagination', { page: this.currentPage, limit: val }) this.$emit('pagination', { page: this.currentPage, limit: val })
if (this.autoScroll) { if (this.autoScroll) {
scrollTo(0, 800) scrollTo(0, 800)
} }
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize }) this.$emit('pagination', { page: val, limit: this.pageSize })
if (this.autoScroll) { if (this.autoScroll) {
scrollTo(0, 800) scrollTo(0, 800)
} }
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.pagination-container { .pagination-container {
background: #fff; background: #fff;
padding: 32px 16px; padding: 32px 16px;
} }
.pagination-container.hidden { .pagination-container.hidden {
display: none; display: none;
} }
</style> </style>

284
sf-ui/src/components/PanThumb/index.vue
View File

@ -1,142 +1,142 @@
<template> <template>
<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item"> <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
<div class="pan-info"> <div class="pan-info">
<div class="pan-info-roles-container"> <div class="pan-info-roles-container">
<slot /> <slot />
</div> </div>
</div> </div>
<!-- eslint-disable-next-line --> <!-- eslint-disable-next-line -->
<div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div> <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'PanThumb', name: 'PanThumb',
props: { props: {
image: { image: {
type: String, type: String,
required: true required: true
}, },
zIndex: { zIndex: {
type: Number, type: Number,
default: 1 default: 1
}, },
width: { width: {
type: String, type: String,
default: '150px' default: '150px'
}, },
height: { height: {
type: String, type: String,
default: '150px' default: '150px'
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.pan-item { .pan-item {
width: 200px; width: 200px;
height: 200px; height: 200px;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
position: relative; position: relative;
cursor: default; cursor: default;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} }
.pan-info-roles-container { .pan-info-roles-container {
padding: 20px; padding: 20px;
text-align: center; text-align: center;
} }
.pan-thumb { .pan-thumb {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
transform-origin: 95% 40%; transform-origin: 95% 40%;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
/* .pan-thumb:after { /* .pan-thumb:after {
content: ''; content: '';
width: 8px; width: 8px;
height: 8px; height: 8px;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
top: 40%; top: 40%;
left: 95%; left: 95%;
margin: -4px 0 0 -4px; margin: -4px 0 0 -4px;
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%); background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9); box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
} */ } */
.pan-info { .pan-info {
position: absolute; position: absolute;
width: inherit; width: inherit;
height: inherit; height: inherit;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
} }
.pan-info h3 { .pan-info h3 {
color: #fff; color: #fff;
text-transform: uppercase; text-transform: uppercase;
position: relative; position: relative;
letter-spacing: 2px; letter-spacing: 2px;
font-size: 18px; font-size: 18px;
margin: 0 60px; margin: 0 60px;
padding: 22px 0 0 0; padding: 22px 0 0 0;
height: 85px; height: 85px;
font-family: 'Open Sans', Arial, sans-serif; font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
} }
.pan-info p { .pan-info p {
color: #fff; color: #fff;
padding: 10px 5px; padding: 10px 5px;
font-style: italic; font-style: italic;
margin: 0 30px; margin: 0 30px;
font-size: 12px; font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.5);
} }
.pan-info p a { .pan-info p a {
display: block; display: block;
color: #333; color: #333;
width: 80px; width: 80px;
height: 80px; height: 80px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border-radius: 50%; border-radius: 50%;
color: #fff; color: #fff;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
font-size: 9px; font-size: 9px;
letter-spacing: 1px; letter-spacing: 1px;
padding-top: 24px; padding-top: 24px;
margin: 7px auto 0; margin: 7px auto 0;
font-family: 'Open Sans', Arial, sans-serif; font-family: 'Open Sans', Arial, sans-serif;
opacity: 0; opacity: 0;
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
transform: translateX(60px) rotate(90deg); transform: translateX(60px) rotate(90deg);
} }
.pan-info p a:hover { .pan-info p a:hover {
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
} }
.pan-item:hover .pan-thumb { .pan-item:hover .pan-thumb {
transform: rotate(-110deg); transform: rotate(-110deg);
} }
.pan-item:hover .pan-info p a { .pan-item:hover .pan-info p a {
opacity: 1; opacity: 1;
transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg);
} }
</style> </style>

212
sf-ui/src/components/RightPanel/index.vue
View File

@ -1,106 +1,106 @@
<template> <template>
<div ref="rightPanel" class="rightPanel-container"> <div ref="rightPanel" class="rightPanel-container">
<div class="rightPanel-background" /> <div class="rightPanel-background" />
<div class="rightPanel"> <div class="rightPanel">
<div class="rightPanel-items"> <div class="rightPanel-items">
<slot /> <slot />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'RightPanel', name: 'RightPanel',
props: { props: {
clickNotClose: { clickNotClose: {
default: false, default: false,
type: Boolean type: Boolean
} }
}, },
computed: { computed: {
show: { show: {
get() { get() {
return this.$store.state.settings.showSettings return this.$store.state.settings.showSettings
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch('settings/changeSetting', {
key: 'showSettings', key: 'showSettings',
value: val value: val
}) })
} }
} }
}, },
watch: { watch: {
show(value) { show(value) {
if (value && !this.clickNotClose) { if (value && !this.clickNotClose) {
this.addEventClick() this.addEventClick()
} }
} }
}, },
mounted() { mounted() {
this.addEventClick() this.addEventClick()
}, },
beforeDestroy() { beforeDestroy() {
const elx = this.$refs.rightPanel const elx = this.$refs.rightPanel
elx.remove() elx.remove()
}, },
methods: { methods: {
addEventClick() { addEventClick() {
window.addEventListener('click', this.closeSidebar) window.addEventListener('click', this.closeSidebar)
}, },
closeSidebar(evt) { closeSidebar(evt) {
const parent = evt.target.closest('.el-drawer__body') const parent = evt.target.closest('.el-drawer__body')
if (!parent) { if (!parent) {
this.show = false this.show = false
window.removeEventListener('click', this.closeSidebar) window.removeEventListener('click', this.closeSidebar)
} }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.rightPanel-background { .rightPanel-background {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
opacity: 0; opacity: 0;
transition: opacity .3s cubic-bezier(.7, .3, .1, 1); transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
background: rgba(0, 0, 0, .2); background: rgba(0, 0, 0, .2);
z-index: -1; z-index: -1;
} }
.rightPanel { .rightPanel {
width: 100%; width: 100%;
max-width: 260px; max-width: 260px;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7, .3, .1, 1); transition: all .25s cubic-bezier(.7, .3, .1, 1);
transform: translate(100%); transform: translate(100%);
background: #fff; background: #fff;
z-index: 40000; z-index: 40000;
} }
.handle-button { .handle-button {
width: 48px; width: 48px;
height: 48px; height: 48px;
position: absolute; position: absolute;
left: -48px; left: -48px;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
border-radius: 6px 0 0 6px !important; border-radius: 6px 0 0 6px !important;
z-index: 0; z-index: 0;
pointer-events: auto; pointer-events: auto;
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
line-height: 48px; line-height: 48px;
i { i {
font-size: 24px; font-size: 24px;
line-height: 48px; line-height: 48px;
} }
} }
</style> </style>

208
sf-ui/src/components/RightToolbar/index.vue
View File

@ -1,104 +1,104 @@
<template> <template>
<div class="top-right-btn" :style="style"> <div class="top-right-btn" :style="style">
<el-row> <el-row>
<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"> <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" /> <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="刷新" placement="top"> <el-tooltip class="item" effect="dark" content="刷新" placement="top">
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" /> <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns"> <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" /> <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
</el-tooltip> </el-tooltip>
</el-row> </el-row>
<el-dialog :title="title" :visible.sync="open" append-to-body> <el-dialog :title="title" :visible.sync="open" append-to-body>
<el-transfer <el-transfer
:titles="['显示', '隐藏']" :titles="['显示', '隐藏']"
v-model="value" v-model="value"
:data="columns" :data="columns"
@change="dataChange" @change="dataChange"
></el-transfer> ></el-transfer>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "RightToolbar", name: "RightToolbar",
data() { data() {
return { return {
// 显隐数据 // 显隐数据
value: [], value: [],
// 弹出层标题 // 弹出层标题
title: "显示/隐藏", title: "显示/隐藏",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
}; };
}, },
props: { props: {
showSearch: { showSearch: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
columns: { columns: {
type: Array, type: Array,
}, },
search: { search: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
gutter: { gutter: {
type: Number, type: Number,
default: 10, default: 10,
}, },
}, },
computed: { computed: {
style() { style() {
const ret = {}; const ret = {};
if (this.gutter) { if (this.gutter) {
ret.marginRight = `${this.gutter / 2}px`; ret.marginRight = `${this.gutter / 2}px`;
} }
return ret; return ret;
} }
}, },
created() { created() {
// 显隐列初始默认隐藏列 // 显隐列初始默认隐藏列
for (let item in this.columns) { for (let item in this.columns) {
if (this.columns[item].visible === false) { if (this.columns[item].visible === false) {
this.value.push(parseInt(item)); this.value.push(parseInt(item));
} }
} }
}, },
methods: { methods: {
// 搜索 // 搜索
toggleSearch() { toggleSearch() {
this.$emit("update:showSearch", !this.showSearch); this.$emit("update:showSearch", !this.showSearch);
}, },
// 刷新 // 刷新
refresh() { refresh() {
this.$emit("queryTable"); this.$emit("queryTable");
}, },
// 右侧列表元素变化 // 右侧列表元素变化
dataChange(data) { dataChange(data) {
for (let item in this.columns) { for (let item in this.columns) {
const key = this.columns[item].key; const key = this.columns[item].key;
this.columns[item].visible = !data.includes(key); this.columns[item].visible = !data.includes(key);
} }
}, },
// 打开显隐列dialog // 打开显隐列dialog
showColumn() { showColumn() {
this.open = true; this.open = true;
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-transfer__button { ::v-deep .el-transfer__button {
border-radius: 50%; border-radius: 50%;
padding: 12px; padding: 12px;
display: block; display: block;
margin-left: 0px; margin-left: 0px;
} }
::v-deep .el-transfer__button:first-child { ::v-deep .el-transfer__button:first-child {
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>

40
sf-ui/src/components/RuoYi/Doc/index.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<div> <div>
<svg-icon icon-class="question" @click="goto" /> <svg-icon icon-class="question" @click="goto" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'RuoYiDoc', name: 'RuoYiDoc',
data() { data() {
return { return {
url: 'http://doc.ruoyi.vip/ruoyi-vue' url: 'http://doc.ruoyi.vip/ruoyi-vue'
} }
}, },
methods: { methods: {
goto() { goto() {
window.open(this.url) window.open(this.url)
} }
} }
} }
</script> </script>

40
sf-ui/src/components/RuoYi/Git/index.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<div> <div>
<svg-icon icon-class="github" @click="goto" /> <svg-icon icon-class="github" @click="goto" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'RuoYiGit', name: 'RuoYiGit',
data() { data() {
return { return {
url: 'https://gitee.com/y_project/RuoYi-Vue' url: 'https://gitee.com/y_project/RuoYi-Vue'
} }
}, },
methods: { methods: {
goto() { goto() {
window.open(this.url) window.open(this.url)
} }
} }
} }
</script> </script>

114
sf-ui/src/components/Screenfull/index.vue
View File

@ -1,57 +1,57 @@
<template> <template>
<div> <div>
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
</div> </div>
</template> </template>
<script> <script>
import screenfull from 'screenfull' import screenfull from 'screenfull'
export default { export default {
name: 'Screenfull', name: 'Screenfull',
data() { data() {
return { return {
isFullscreen: false isFullscreen: false
} }
}, },
mounted() { mounted() {
this.init() this.init()
}, },
beforeDestroy() { beforeDestroy() {
this.destroy() this.destroy()
}, },
methods: { methods: {
click() { click() {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
this.$message({ message: '你的浏览器不支持全屏', type: 'warning' }) this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
return false return false
} }
screenfull.toggle() screenfull.toggle()
}, },
change() { change() {
this.isFullscreen = screenfull.isFullscreen this.isFullscreen = screenfull.isFullscreen
}, },
init() { init() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.on('change', this.change) screenfull.on('change', this.change)
} }
}, },
destroy() { destroy() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.off('change', this.change) screenfull.off('change', this.change)
} }
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.screenfull-svg { .screenfull-svg {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
fill: #5a5e66;; fill: #5a5e66;;
width: 20px; width: 20px;
height: 20px; height: 20px;
vertical-align: 10px; vertical-align: 10px;
} }
</style> </style>

112
sf-ui/src/components/SizeSelect/index.vue
View File

@ -1,56 +1,56 @@
<template> <template>
<el-dropdown trigger="hover" @command="handleSetSize"> <el-dropdown trigger="click" @command="handleSetSize">
<div> <div>
<svg-icon class-name="size-icon" icon-class="size" /> <svg-icon class-name="size-icon" icon-class="size" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value"> <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
{{ item.label }} {{ item.label }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
sizeOptions: [ sizeOptions: [
{ label: 'Default', value: 'default' }, { label: 'Default', value: 'default' },
{ label: 'Medium', value: 'medium' }, { label: 'Medium', value: 'medium' },
{ label: 'Small', value: 'small' }, { label: 'Small', value: 'small' },
{ label: 'Mini', value: 'mini' } { label: 'Mini', value: 'mini' }
] ]
} }
}, },
computed: { computed: {
size () { size() {
return this.$store.getters.size return this.$store.getters.size
} }
}, },
methods: { methods: {
handleSetSize (size) { handleSetSize(size) {
this.$ELEMENT.size = size this.$ELEMENT.size = size
this.$store.dispatch('app/setSize', size) this.$store.dispatch('app/setSize', size)
this.refreshView() this.refreshView()
this.$message({ this.$message({
message: 'Switch Size Success', message: 'Switch Size Success',
type: 'success' type: 'success'
}) })
}, },
refreshView () { refreshView() {
// In order to make the cached page re-rendered // In order to make the cached page re-rendered
this.$store.dispatch('tagsView/delAllCachedViews', this.$route) this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
const { fullPath } = this.$route const { fullPath } = this.$route
this.$nextTick(() => { this.$nextTick(() => {
this.$router.replace({ this.$router.replace({
path: '/redirect' + fullPath path: '/redirect' + fullPath
}) })
}) })
} }
} }
} }
</script> </script>

122
sf-ui/src/components/SvgIcon/index.vue
View File

@ -1,61 +1,61 @@
<template> <template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" /> <use :xlink:href="iconName" />
</svg> </svg>
</template> </template>
<script> <script>
import { isExternal } from '@/utils/validate' import { isExternal } from '@/utils/validate'
export default { export default {
name: 'SvgIcon', name: 'SvgIcon',
props: { props: {
iconClass: { iconClass: {
type: String, type: String,
required: true required: true
}, },
className: { className: {
type: String, type: String,
default: '' default: ''
} }
}, },
computed: { computed: {
isExternal() { isExternal() {
return isExternal(this.iconClass) return isExternal(this.iconClass)
}, },
iconName() { iconName() {
return `#icon-${this.iconClass}` return `#icon-${this.iconClass}`
}, },
svgClass() { svgClass() {
if (this.className) { if (this.className) {
return 'svg-icon ' + this.className return 'svg-icon ' + this.className
} else { } else {
return 'svg-icon' return 'svg-icon'
} }
}, },
styleExternalIcon() { styleExternalIcon() {
return { return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`, mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
} }
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.svg-icon { .svg-icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
vertical-align: -0.15em; vertical-align: -0.15em;
fill: currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
} }
.svg-external-icon { .svg-external-icon {
background-color: currentColor; background-color: currentColor;
mask-size: cover!important; mask-size: cover!important;
display: inline-block; display: inline-block;
} }
</style> </style>

346
sf-ui/src/components/ThemePicker/index.vue
View File

@ -1,173 +1,173 @@
<template> <template>
<el-color-picker <el-color-picker
v-model="theme" v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker" class="theme-picker"
popper-class="theme-picker-dropdown" popper-class="theme-picker-dropdown"
/> />
</template> </template>
<script> <script>
const version = require('element-ui/package.json').version // element-ui version from node_modules const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color const ORIGINAL_THEME = '#409EFF' // default color
export default { export default {
data() { data() {
return { return {
chalk: '', // content of theme-chalk css chalk: '', // content of theme-chalk css
theme: '' theme: ''
} }
}, },
computed: { computed: {
defaultTheme() { defaultTheme() {
return this.$store.state.settings.theme return this.$store.state.settings.theme
} }
}, },
watch: { watch: {
defaultTheme: { defaultTheme: {
handler: function(val, oldVal) { handler: function(val, oldVal) {
this.theme = val this.theme = val
}, },
immediate: true immediate: true
}, },
async theme(val) { async theme(val) {
await this.setTheme(val) await this.setTheme(val)
} }
}, },
created() { created() {
if(this.defaultTheme !== ORIGINAL_THEME) { if(this.defaultTheme !== ORIGINAL_THEME) {
this.setTheme(this.defaultTheme) this.setTheme(this.defaultTheme)
} }
}, },
methods: { methods: {
async setTheme(val) { async setTheme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', '')) const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
const getHandler = (variable, id) => { const getHandler = (variable, id) => {
return () => { return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id) let styleTag = document.getElementById(id)
if (!styleTag) { if (!styleTag) {
styleTag = document.createElement('style') styleTag = document.createElement('style')
styleTag.setAttribute('id', id) styleTag.setAttribute('id', id)
document.head.appendChild(styleTag) document.head.appendChild(styleTag)
} }
styleTag.innerText = newStyle styleTag.innerText = newStyle
} }
} }
if (!this.chalk) { if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
await this.getCSSString(url, 'chalk') await this.getCSSString(url, 'chalk')
} }
const chalkHandler = getHandler('chalk', 'chalk-style') const chalkHandler = getHandler('chalk', 'chalk-style')
chalkHandler() chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style')) const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => { .filter(style => {
const text = style.innerText const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
}) })
styles.forEach(style => { styles.forEach(style => {
const { innerText } = style const { innerText } = style
if (typeof innerText !== 'string') return if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
}) })
this.$emit('change', val) this.$emit('change', val)
}, },
updateStyle(style, oldCluster, newCluster) { updateStyle(style, oldCluster, newCluster) {
let newStyle = style let newStyle = style
oldCluster.forEach((color, index) => { oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
}) })
return newStyle return newStyle
}, },
getCSSString(url, variable) { getCSSString(url, variable) {
return new Promise(resolve => { return new Promise(resolve => {
const xhr = new XMLHttpRequest() const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) { if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
resolve() resolve()
} }
} }
xhr.open('GET', url) xhr.open('GET', url)
xhr.send() xhr.send()
}) })
}, },
getThemeCluster(theme) { getThemeCluster(theme) {
const tintColor = (color, tint) => { const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16) let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16) let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16) let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',') return [red, green, blue].join(',')
} else { } else {
red += Math.round(tint * (255 - red)) red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green)) green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue)) blue += Math.round(tint * (255 - blue))
red = red.toString(16) red = red.toString(16)
green = green.toString(16) green = green.toString(16)
blue = blue.toString(16) blue = blue.toString(16)
return `#${red}${green}${blue}` return `#${red}${green}${blue}`
} }
} }
const shadeColor = (color, shade) => { const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16) let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16) let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16) let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red) red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green) green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue) blue = Math.round((1 - shade) * blue)
red = red.toString(16) red = red.toString(16)
green = green.toString(16) green = green.toString(16)
blue = blue.toString(16) blue = blue.toString(16)
return `#${red}${green}${blue}` return `#${red}${green}${blue}`
} }
const clusters = [theme] const clusters = [theme]
for (let i = 0; i <= 9; i++) { for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2)))) clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
} }
clusters.push(shadeColor(theme, 0.1)) clusters.push(shadeColor(theme, 0.1))
return clusters return clusters
} }
} }
} }
</script> </script>
<style> <style>
.theme-message, .theme-message,
.theme-picker-dropdown { .theme-picker-dropdown {
z-index: 99999 !important; z-index: 99999 !important;
} }
.theme-picker .el-color-picker__trigger { .theme-picker .el-color-picker__trigger {
height: 26px !important; height: 26px !important;
width: 26px !important; width: 26px !important;
padding: 2px; padding: 2px;
} }
.theme-picker-dropdown .el-color-dropdown__link-btn { .theme-picker-dropdown .el-color-dropdown__link-btn {
display: none; display: none;
} }
</style> </style>

72
sf-ui/src/components/iFrame/index.vue
View File

@ -1,36 +1,36 @@
<template> <template>
<div v-loading="loading" :style="'height:' + height"> <div v-loading="loading" :style="'height:' + height">
<iframe <iframe
:src="src" :src="src"
frameborder="no" frameborder="no"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
scrolling="auto" scrolling="auto"
/> />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
src: { src: {
type: String, type: String,
required: true required: true
}, },
}, },
data() { data() {
return { return {
height: document.documentElement.clientHeight - 94.5 + "px;", height: document.documentElement.clientHeight - 94.5 + "px;",
loading: true, loading: true,
url: this.src url: this.src
}; };
}, },
mounted: function () { mounted: function () {
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
}, 300); }, 300);
const that = this; const that = this;
window.onresize = function temp() { window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 94.5 + "px;"; that.height = document.documentElement.clientHeight - 94.5 + "px;";
}; };
} }
}; };
</script> </script>

126
sf-ui/src/directive/dialog/drag.js
View File

@ -1,64 +1,64 @@
/** /**
* v-dialogDrag 弹窗拖拽 * v-dialogDrag 弹窗拖拽
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
export default { export default {
bind(el, binding, vnode, oldVnode) { bind(el, binding, vnode, oldVnode) {
const value = binding.value const value = binding.value
if (value == false) return if (value == false) return
// 获取拖拽内容头部 // 获取拖拽内容头部
const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog'); const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.cursor = 'move';
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dragDom.style.position = 'absolute'; dragDom.style.position = 'absolute';
dragDom.style.marginTop = 0; dragDom.style.marginTop = 0;
let width = dragDom.style.width; let width = dragDom.style.width;
if (width.includes('%')) { if (width.includes('%')) {
width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100); width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
} else { } else {
width = +width.replace(/\px/g, ''); width = +width.replace(/\px/g, '');
} }
dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`; dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
// 鼠标按下事件 // 鼠标按下事件
dialogHeaderEl.onmousedown = (e) => { dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离) // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
const disX = e.clientX - dialogHeaderEl.offsetLeft; const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop; const disY = e.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换 // 获取到的值带px 正则匹配替换
let styL, styT; let styL, styT;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) { if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100); styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100); styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
} else { } else {
styL = +sty.left.replace(/\px/g, ''); styL = +sty.left.replace(/\px/g, '');
styT = +sty.top.replace(/\px/g, ''); styT = +sty.top.replace(/\px/g, '');
}; };
// 鼠标拖拽事件 // 鼠标拖拽事件
document.onmousemove = function (e) { document.onmousemove = function (e) {
// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离） // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
const l = e.clientX - disX; const l = e.clientX - disX;
const t = e.clientY - disY; const t = e.clientY - disY;
let finallyL = l + styL let finallyL = l + styL
let finallyT = t + styT let finallyT = t + styT
// 移动当前元素 // 移动当前元素
dragDom.style.left = `${finallyL}px`; dragDom.style.left = `${finallyL}px`;
dragDom.style.top = `${finallyT}px`; dragDom.style.top = `${finallyT}px`;
}; };
document.onmouseup = function (e) { document.onmouseup = function (e) {
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
}; };
} }
} }
}; };

66
sf-ui/src/directive/dialog/dragHeight.js
View File

@ -1,34 +1,34 @@
/** /**
* v-dialogDragWidth 可拖动弹窗高度（右下角） * v-dialogDragWidth 可拖动弹窗高度（右下角）
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
export default { export default {
bind(el) { bind(el) {
const dragDom = el.querySelector('.el-dialog'); const dragDom = el.querySelector('.el-dialog');
const lineEl = document.createElement('div'); const lineEl = document.createElement('div');
lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;'; lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';
lineEl.addEventListener('mousedown', lineEl.addEventListener('mousedown',
function(e) { function(e) {
// 鼠标按下，计算当前元素距离可视区的距离 // 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft; const disX = e.clientX - el.offsetLeft;
const disY = e.clientY - el.offsetTop; const disY = e.clientY - el.offsetTop;
// 当前宽度 高度 // 当前宽度 高度
const curWidth = dragDom.offsetWidth; const curWidth = dragDom.offsetWidth;
const curHeight = dragDom.offsetHeight; const curHeight = dragDom.offsetHeight;
document.onmousemove = function(e) { document.onmousemove = function(e) {
e.preventDefault(); // 移动时禁用默认事件 e.preventDefault(); // 移动时禁用默认事件
// 通过事件委托，计算移动的距离 // 通过事件委托，计算移动的距离
const xl = e.clientX - disX; const xl = e.clientX - disX;
const yl = e.clientY - disY const yl = e.clientY - disY
dragDom.style.width = `${curWidth + xl}px`; dragDom.style.width = `${curWidth + xl}px`;
dragDom.style.height = `${curHeight + yl}px`; dragDom.style.height = `${curHeight + yl}px`;
}; };
document.onmouseup = function(e) { document.onmouseup = function(e) {
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
}; };
}, false); }, false);
dragDom.appendChild(lineEl); dragDom.appendChild(lineEl);
} }
} }

58
sf-ui/src/directive/dialog/dragWidth.js
View File

@ -1,30 +1,30 @@
/** /**
* v-dialogDragWidth 可拖动弹窗宽度（右侧边） * v-dialogDragWidth 可拖动弹窗宽度（右侧边）
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
export default { export default {
bind(el) { bind(el) {
const dragDom = el.querySelector('.el-dialog'); const dragDom = el.querySelector('.el-dialog');
const lineEl = document.createElement('div'); const lineEl = document.createElement('div');
lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;'; lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
lineEl.addEventListener('mousedown', lineEl.addEventListener('mousedown',
function (e) { function (e) {
// 鼠标按下，计算当前元素距离可视区的距离 // 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft; const disX = e.clientX - el.offsetLeft;
// 当前宽度 // 当前宽度
const curWidth = dragDom.offsetWidth; const curWidth = dragDom.offsetWidth;
document.onmousemove = function (e) { document.onmousemove = function (e) {
e.preventDefault(); // 移动时禁用默认事件 e.preventDefault(); // 移动时禁用默认事件
// 通过事件委托，计算移动的距离 // 通过事件委托，计算移动的距离
const l = e.clientX - disX; const l = e.clientX - disX;
dragDom.style.width = `${curWidth + l}px`; dragDom.style.width = `${curWidth + l}px`;
}; };
document.onmouseup = function (e) { document.onmouseup = function (e) {
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
}; };
}, false); }, false);
dragDom.appendChild(lineEl); dragDom.appendChild(lineEl);
} }
} }

46
sf-ui/src/directive/index.js
View File

@ -1,23 +1,23 @@
import hasRole from './permission/hasRole' import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi' import hasPermi from './permission/hasPermi'
import dialogDrag from './dialog/drag' import dialogDrag from './dialog/drag'
import dialogDragWidth from './dialog/dragWidth' import dialogDragWidth from './dialog/dragWidth'
import dialogDragHeight from './dialog/dragHeight' import dialogDragHeight from './dialog/dragHeight'
import clipboard from './module/clipboard' import clipboard from './module/clipboard'
const install = function(Vue) { const install = function(Vue) {
Vue.directive('hasRole', hasRole) Vue.directive('hasRole', hasRole)
Vue.directive('hasPermi', hasPermi) Vue.directive('hasPermi', hasPermi)
Vue.directive('clipboard', clipboard) Vue.directive('clipboard', clipboard)
Vue.directive('dialogDrag', dialogDrag) Vue.directive('dialogDrag', dialogDrag)
Vue.directive('dialogDragWidth', dialogDragWidth) Vue.directive('dialogDragWidth', dialogDragWidth)
Vue.directive('dialogDragHeight', dialogDragHeight) Vue.directive('dialogDragHeight', dialogDragHeight)
} }
if (window.Vue) { if (window.Vue) {
window['hasRole'] = hasRole window['hasRole'] = hasRole
window['hasPermi'] = hasPermi window['hasPermi'] = hasPermi
Vue.use(install); // eslint-disable-line Vue.use(install); // eslint-disable-line
} }
export default install export default install

56
sf-ui/src/directive/permission/hasPermi.js
View File

@ -1,28 +1,28 @@
/** /**
* v-hasPermi 操作权限处理 * v-hasPermi 操作权限处理
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
import store from '@/store' import store from '@/store'
export default { export default {
inserted(el, binding, vnode) { inserted(el, binding, vnode) {
const { value } = binding const { value } = binding
const all_permission = "*:*:*"; const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions const permissions = store.getters && store.getters.permissions
if (value && value instanceof Array && value.length > 0) { if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value const permissionFlag = value
const hasPermissions = permissions.some(permission => { const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag.includes(permission) return all_permission === permission || permissionFlag.includes(permission)
}) })
if (!hasPermissions) { if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el) el.parentNode && el.parentNode.removeChild(el)
} }
} else { } else {
throw new Error(`请设置操作权限标签值`) throw new Error(`请设置操作权限标签值`)
} }
} }
} }

56
sf-ui/src/directive/permission/hasRole.js
View File

@ -1,28 +1,28 @@
/** /**
* v-hasRole 角色权限处理 * v-hasRole 角色权限处理
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
import store from '@/store' import store from '@/store'
export default { export default {
inserted(el, binding, vnode) { inserted(el, binding, vnode) {
const { value } = binding const { value } = binding
const super_admin = "admin"; const super_admin = "admin";
const roles = store.getters && store.getters.roles const roles = store.getters && store.getters.roles
if (value && value instanceof Array && value.length > 0) { if (value && value instanceof Array && value.length > 0) {
const roleFlag = value const roleFlag = value
const hasRole = roles.some(role => { const hasRole = roles.some(role => {
return super_admin === role || roleFlag.includes(role) return super_admin === role || roleFlag.includes(role)
}) })
if (!hasRole) { if (!hasRole) {
el.parentNode && el.parentNode.removeChild(el) el.parentNode && el.parentNode.removeChild(el)
} }
} else { } else {
throw new Error(`请设置角色权限标签值"`) throw new Error(`请设置角色权限标签值"`)
} }
} }
} }

4
sf-ui/src/layout/components/AppMain.vue
View File

@ -30,10 +30,9 @@ export default {
.app-main { .app-main {
/* 50= navbar 50 */ /* 50= navbar 50 */
min-height: calc(100vh - 50px); min-height: calc(100vh - 50px);
height: calc(100vh - 50px);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: auto; overflow: hidden;
} }
.fixed-header + .app-main { .fixed-header + .app-main {
@ -44,7 +43,6 @@ export default {
.app-main { .app-main {
/* 84 = navbar + tags-view = 50 + 34 */ /* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
height: calc(100vh - 84px);
} }
.fixed-header + .app-main { .fixed-header + .app-main {

48
sf-ui/src/layout/components/IframeToggle/index.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<transition-group name="fade-transform" mode="out-in"> <transition-group name="fade-transform" mode="out-in">
<inner-link <inner-link
v-for="(item, index) in iframeViews" v-for="(item, index) in iframeViews"
:key="item.path" :key="item.path"
:iframeId="'iframe' + index" :iframeId="'iframe' + index"
v-show="$route.path === item.path" v-show="$route.path === item.path"
:src="item.meta.link" :src="item.meta.link"
></inner-link> ></inner-link>
</transition-group> </transition-group>
</template> </template>
<script> <script>
import InnerLink from "../InnerLink/index" import InnerLink from "../InnerLink/index"
export default { export default {
components: { InnerLink }, components: { InnerLink },
computed: { computed: {
iframeViews() { iframeViews() {
return this.$store.state.tagsView.iframeViews return this.$store.state.tagsView.iframeViews
} }
} }
} }
</script> </script>

94
sf-ui/src/layout/components/InnerLink/index.vue
View File

@ -1,47 +1,47 @@
<template> <template>
<div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！"> <div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！">
<iframe <iframe
:id="iframeId" :id="iframeId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
:src="src" :src="src"
frameborder="no" frameborder="no"
></iframe> ></iframe>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
src: { src: {
type: String, type: String,
default: "/" default: "/"
}, },
iframeId: { iframeId: {
type: String type: String
} }
}, },
data() { data() {
return { return {
loading: false, loading: false,
height: document.documentElement.clientHeight - 94.5 + "px;" height: document.documentElement.clientHeight - 94.5 + "px;"
}; };
}, },
mounted() { mounted() {
var _this = this; var _this = this;
const iframeId = ("#" + this.iframeId).replace(/\//g, "\\/"); const iframeId = ("#" + this.iframeId).replace(/\//g, "\\/");
const iframe = document.querySelector(iframeId); const iframe = document.querySelector(iframeId);
// iframe页面loading控制 // iframe页面loading控制
if (iframe.attachEvent) { if (iframe.attachEvent) {
this.loading = true; this.loading = true;
iframe.attachEvent("onload", function () { iframe.attachEvent("onload", function () {
_this.loading = false; _this.loading = false;
}); });
} else { } else {
this.loading = true; this.loading = true;
iframe.onload = function () { iframe.onload = function () {
_this.loading = false; _this.loading = false;
}; };
} }
} }
}; };
</script> </script>

411
sf-ui/src/layout/components/Navbar.vue
View File

@ -1,206 +1,205 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" <!-- <div style="float: left; line-height: 50px;" class="sidebar-logo-container">
@toggleClick="toggleSideBar" /> <Logo :collapse="true" />
</div> -->
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" /> <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<div class="right-menu"> <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<!-- <template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" /> <div class="right-menu">
<template v-if="device!=='mobile'">
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <search id="header-search" class="right-menu-item" />
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip> <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
<el-tooltip content="文档地址" effect="dark" placement="bottom"> </el-tooltip>
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip> <el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
<screenfull id="screenfull" class="right-menu-item hover-effect" /> </el-tooltip> -->
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <screenfull id="screenfull" class="right-menu-item hover-effect" />
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</template> --> </el-tooltip> -->
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover"> </template>
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar"> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<span class="ml10">{{ name }}</span> <div class="avatar-wrapper">
<i class="el-icon-caret-bottom" /> <img :src="avatar" class="user-avatar">
</div> <i class="el-icon-caret-bottom" />
<el-dropdown-menu slot="dropdown"> </div>
<router-link to="/user/profile"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item> <router-link to="/user/profile">
</router-link> <el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item @click.native="setting = true"> </router-link>
<span>布局设置</span> <el-dropdown-item @click.native="setting = true">
</el-dropdown-item> <span>布局设置</span>
<el-dropdown-item divided @click.native="logout"> </el-dropdown-item>
<span>退出登录</span> <el-dropdown-item divided @click.native="logout">
</el-dropdown-item> <span>退出登录</span>
</el-dropdown-menu> </el-dropdown-item>
</el-dropdown> </el-dropdown-menu>
</div> </el-dropdown>
</div> </div>
</template> </div>
</template>
<script>
import { mapGetters } from 'vuex' <script>
import Breadcrumb from '@/components/Breadcrumb' import { mapGetters } from 'vuex'
import TopNav from '@/components/TopNav' import Logo from "../components/Sidebar/Logo";
import Hamburger from '@/components/Hamburger' import Breadcrumb from '@/components/Breadcrumb'
import Screenfull from '@/components/Screenfull' import TopNav from '@/components/TopNav'
import SizeSelect from '@/components/SizeSelect' import Hamburger from '@/components/Hamburger'
import Search from '@/components/HeaderSearch' import Screenfull from '@/components/Screenfull'
import RuoYiGit from '@/components/RuoYi/Git' import SizeSelect from '@/components/SizeSelect'
import RuoYiDoc from '@/components/RuoYi/Doc' import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
export default { import RuoYiDoc from '@/components/RuoYi/Doc'
components: {
Breadcrumb, export default {
TopNav, components: {
Hamburger, Logo,
Screenfull, Breadcrumb,
SizeSelect, TopNav,
Search, Hamburger,
RuoYiGit, Screenfull,
RuoYiDoc SizeSelect,
}, Search,
computed: { RuoYiGit,
...mapGetters([ RuoYiDoc
'sidebar', },
'avatar', computed: {
'device', ...mapGetters([
'name' 'sidebar',
]), 'avatar',
setting: { 'device'
get () { ]),
return this.$store.state.settings.showSettings setting: {
}, get() {
set (val) { return this.$store.state.settings.showSettings
this.$store.dispatch('settings/changeSetting', { },
key: 'showSettings', set(val) {
value: val this.$store.dispatch('settings/changeSetting', {
}) key: 'showSettings',
} value: val
}, })
topNav: { }
get () { },
return this.$store.state.settings.topNav topNav: {
} get() {
} return this.$store.state.settings.topNav
}, }
methods: { }
toggleSideBar () { },
this.$store.dispatch('app/toggleSideBar') methods: {
}, toggleSideBar() {
async logout () { this.$store.dispatch('app/toggleSideBar')
this.$confirm('确定注销并退出系统吗？', '提示', { },
confirmButtonText: '确定', async logout() {
cancelButtonText: '取消', this.$confirm('确定注销并退出系统吗？', '提示', {
type: 'warning' confirmButtonText: '确定',
}).then(() => { cancelButtonText: '取消',
this.$store.dispatch('LogOut').then(() => { type: 'warning'
location.href = '/index'; }).then(() => {
}) this.$store.dispatch('LogOut').then(() => {
}).catch(() => { }); location.href = '/index';
} })
} }).catch(() => {});
} }
</script> }
}
<style lang="scss" scoped> </script>
.navbar {
height: 50px; <style lang="scss" scoped>
overflow: hidden; .navbar {
position: relative; height: 50px;
background: #fff; overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08); position: relative;
background: #fff;
.hamburger-container { box-shadow: 0 1px 4px rgba(0,21,41,.08);
line-height: 46px;
height: 100%; .hamburger-container {
float: left; line-height: 46px;
cursor: pointer; height: 100%;
transition: background .3s; float: left;
-webkit-tap-highlight-color: transparent; cursor: pointer;
transition: background .3s;
&:hover { -webkit-tap-highlight-color:transparent;
background: rgba(0, 0, 0, .025)
} &:hover {
} background: rgba(0, 0, 0, .025)
}
.breadcrumb-container { }
float: left;
} .breadcrumb-container {
float: left;
.topmenu-container { }
position: absolute;
left: 50px; .topmenu-container {
} position: absolute;
left: 50px;
.errLog-container { }
display: inline-block;
vertical-align: top; .errLog-container {
} display: inline-block;
vertical-align: top;
.right-menu { }
float: right;
height: 100%; .right-menu {
line-height: 50px; float: right;
height: 100%;
&:focus { line-height: 50px;
outline: none;
} &:focus {
outline: none;
.right-menu-item { }
display: inline-block;
padding: 0 8px; .right-menu-item {
height: 100%; display: inline-block;
font-size: 18px; padding: 0 8px;
color: #5a5e66; height: 100%;
vertical-align: text-bottom; font-size: 18px;
color: #5a5e66;
&.hover-effect { vertical-align: text-bottom;
cursor: pointer;
transition: background .3s; &.hover-effect {
cursor: pointer;
&:hover { transition: background .3s;
background: rgba(0, 0, 0, .025)
} &:hover {
} background: rgba(0, 0, 0, .025)
} }
}
.avatar-container { }
margin-right: 30px;
.avatar-container {
.avatar-wrapper { margin-right: 30px;
margin-top: 5px;
position: relative; .avatar-wrapper {
display: flex; margin-top: 5px;
align-items: center; position: relative;
line-height: initial;
.user-avatar {
.user-avatar { cursor: pointer;
cursor: pointer; width: 40px;
width: 40px; height: 40px;
height: 40px; border-radius: 10px;
border-radius: 10px; }
}
.el-icon-caret-bottom {
.el-icon-caret-bottom { cursor: pointer;
cursor: pointer; position: absolute;
position: absolute; right: -20px;
right: -20px; top: 25px;
// top: 25px; font-size: 12px;
font-size: 12px; }
} }
} }
} }
} }
} </style>
</style>

520
sf-ui/src/layout/components/Settings/index.vue
View File

@ -1,260 +1,260 @@
<template> <template>
<el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false"> <el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
<div class="drawer-container"> <div class="drawer-container">
<div> <div>
<div class="setting-drawer-content"> <div class="setting-drawer-content">
<div class="setting-drawer-title"> <div class="setting-drawer-title">
<h3 class="drawer-title">主题风格设置</h3> <h3 class="drawer-title">主题风格设置</h3>
</div> </div>
<div class="setting-drawer-block-checbox"> <div class="setting-drawer-block-checbox">
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')"> <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
<img src="@/assets/images/dark.svg" alt="dark"> <img src="@/assets/images/dark.svg" alt="dark">
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
<i aria-label="图标: check" class="anticon anticon-check"> <i aria-label="图标: check" class="anticon anticon-check">
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class=""> <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/> <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
</svg> </svg>
</i> </i>
</div> </div>
</div> </div>
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')"> <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
<img src="@/assets/images/light.svg" alt="light"> <img src="@/assets/images/light.svg" alt="light">
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
<i aria-label="图标: check" class="anticon anticon-check"> <i aria-label="图标: check" class="anticon anticon-check">
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class=""> <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/> <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
</svg> </svg>
</i> </i>
</div> </div>
</div> </div>
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>主题颜色</span> <span>主题颜色</span>
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" /> <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
</div> </div>
</div> </div>
<el-divider/> <el-divider/>
<h3 class="drawer-title">系统布局配置</h3> <h3 class="drawer-title">系统布局配置</h3>
<div class="drawer-item"> <div class="drawer-item">
<span>开启 TopNav</span> <span>开启 TopNav</span>
<el-switch v-model="topNav" class="drawer-switch" /> <el-switch v-model="topNav" class="drawer-switch" />
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>开启 Tags-Views</span> <span>开启 Tags-Views</span>
<el-switch v-model="tagsView" class="drawer-switch" /> <el-switch v-model="tagsView" class="drawer-switch" />
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>固定 Header</span> <span>固定 Header</span>
<el-switch v-model="fixedHeader" class="drawer-switch" /> <el-switch v-model="fixedHeader" class="drawer-switch" />
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>显示 Logo</span> <span>显示 Logo</span>
<el-switch v-model="sidebarLogo" class="drawer-switch" /> <el-switch v-model="sidebarLogo" class="drawer-switch" />
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>动态标题</span> <span>动态标题</span>
<el-switch v-model="dynamicTitle" class="drawer-switch" /> <el-switch v-model="dynamicTitle" class="drawer-switch" />
</div> </div>
<el-divider/> <el-divider/>
<el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button> <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
<el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button> <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
</div> </div>
</div> </div>
</el-drawer> </el-drawer>
</template> </template>
<script> <script>
import ThemePicker from '@/components/ThemePicker' import ThemePicker from '@/components/ThemePicker'
export default { export default {
components: { ThemePicker }, components: { ThemePicker },
data() { data() {
return { return {
theme: this.$store.state.settings.theme, theme: this.$store.state.settings.theme,
sideTheme: this.$store.state.settings.sideTheme sideTheme: this.$store.state.settings.sideTheme
}; };
}, },
computed: { computed: {
visible: { visible: {
get() { get() {
return this.$store.state.settings.showSettings return this.$store.state.settings.showSettings
} }
}, },
fixedHeader: { fixedHeader: {
get() { get() {
return this.$store.state.settings.fixedHeader return this.$store.state.settings.fixedHeader
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch('settings/changeSetting', {
key: 'fixedHeader', key: 'fixedHeader',
value: val value: val
}) })
} }
}, },
topNav: { topNav: {
get() { get() {
return this.$store.state.settings.topNav return this.$store.state.settings.topNav
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch('settings/changeSetting', {
key: 'topNav', key: 'topNav',
value: val value: val
}) })
if (!val) { if (!val) {
// this.$store.dispatch('app/toggleSideBarHide', false); // this.$store.dispatch('app/toggleSideBarHide', false);
this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes); this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes);
} }
} }
}, },
tagsView: { tagsView: {
get() { get() {
return this.$store.state.settings.tagsView return this.$store.state.settings.tagsView
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch('settings/changeSetting', {
key: 'tagsView', key: 'tagsView',
value: val value: val
}) })
} }
}, },
sidebarLogo: { sidebarLogo: {
get() { get() {
return this.$store.state.settings.sidebarLogo return this.$store.state.settings.sidebarLogo
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch('settings/changeSetting', {
key: 'sidebarLogo', key: 'sidebarLogo',
value: val value: val
}) })
} }
}, },
dynamicTitle: { dynamicTitle: {
get() { get() {
return this.$store.state.settings.dynamicTitle return this.$store.state.settings.dynamicTitle
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch('settings/changeSetting', {
key: 'dynamicTitle', key: 'dynamicTitle',
value: val value: val
}) })
} }
}, },
}, },
methods: { methods: {
themeChange(val) { themeChange(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch('settings/changeSetting', {
key: 'theme', key: 'theme',
value: val value: val
}) })
this.theme = val; this.theme = val;
}, },
handleTheme(val) { handleTheme(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch('settings/changeSetting', {
key: 'sideTheme', key: 'sideTheme',
value: val value: val
}) })
this.sideTheme = val; this.sideTheme = val;
}, },
saveSetting() { saveSetting() {
this.$modal.loading("正在保存到本地，请稍候..."); this.$modal.loading("正在保存到本地，请稍候...");
this.$cache.local.set( this.$cache.local.set(
"layout-setting", "layout-setting",
`{ `{
"topNav":${this.topNav}, "topNav":${this.topNav},
"tagsView":${this.tagsView}, "tagsView":${this.tagsView},
"fixedHeader":${this.fixedHeader}, "fixedHeader":${this.fixedHeader},
"sidebarLogo":${this.sidebarLogo}, "sidebarLogo":${this.sidebarLogo},
"dynamicTitle":${this.dynamicTitle}, "dynamicTitle":${this.dynamicTitle},
"sideTheme":"${this.sideTheme}", "sideTheme":"${this.sideTheme}",
"theme":"${this.theme}" "theme":"${this.theme}"
}` }`
); );
setTimeout(this.$modal.closeLoading(), 1000) setTimeout(this.$modal.closeLoading(), 1000)
}, },
resetSetting() { resetSetting() {
this.$modal.loading("正在清除设置缓存并刷新，请稍候..."); this.$modal.loading("正在清除设置缓存并刷新，请稍候...");
this.$cache.local.remove("layout-setting") this.$cache.local.remove("layout-setting")
setTimeout("window.location.reload()", 1000) setTimeout("window.location.reload()", 1000)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.setting-drawer-content { .setting-drawer-content {
.setting-drawer-title { .setting-drawer-title {
margin-bottom: 12px; margin-bottom: 12px;
color: rgba(0, 0, 0, .85); color: rgba(0, 0, 0, .85);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
font-weight: bold; font-weight: bold;
} }
.setting-drawer-block-checbox { .setting-drawer-block-checbox {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
margin-bottom: 20px; margin-bottom: 20px;
.setting-drawer-block-checbox-item { .setting-drawer-block-checbox-item {
position: relative; position: relative;
margin-right: 16px; margin-right: 16px;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
img { img {
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
.setting-drawer-block-checbox-selectIcon { .setting-drawer-block-checbox-selectIcon {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 15px; padding-top: 15px;
padding-left: 24px; padding-left: 24px;
color: #1890ff; color: #1890ff;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
} }
} }
} }
} }
.drawer-container { .drawer-container {
padding: 20px; padding: 20px;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
word-wrap: break-word; word-wrap: break-word;
.drawer-title { .drawer-title {
margin-bottom: 12px; margin-bottom: 12px;
color: rgba(0, 0, 0, .85); color: rgba(0, 0, 0, .85);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
} }
.drawer-item { .drawer-item {
color: rgba(0, 0, 0, .65); color: rgba(0, 0, 0, .65);
font-size: 14px; font-size: 14px;
padding: 12px 0; padding: 12px 0;
} }
.drawer-switch { .drawer-switch {
float: right float: right
} }
} }
</style> </style>

50
sf-ui/src/layout/components/Sidebar/FixiOSBug.js
View File

@ -1,25 +1,25 @@
export default { export default {
computed: { computed: {
device() { device() {
return this.$store.state.app.device return this.$store.state.app.device
} }
}, },
mounted() { mounted() {
// In order to fix the click on menu on the ios device will trigger the mouseleave bug // In order to fix the click on menu on the ios device will trigger the mouseleave bug
this.fixBugIniOS() this.fixBugIniOS()
}, },
methods: { methods: {
fixBugIniOS() { fixBugIniOS() {
const $subMenu = this.$refs.subMenu const $subMenu = this.$refs.subMenu
if ($subMenu) { if ($subMenu) {
const handleMouseleave = $subMenu.handleMouseleave const handleMouseleave = $subMenu.handleMouseleave
$subMenu.handleMouseleave = (e) => { $subMenu.handleMouseleave = (e) => {
if (this.device === 'mobile') { if (this.device === 'mobile') {
return return
} }
handleMouseleave(e) handleMouseleave(e)
} }
} }
} }
} }
} }

66
sf-ui/src/layout/components/Sidebar/Item.vue
View File

@ -1,33 +1,33 @@
<script> <script>
export default { export default {
name: 'MenuItem', name: 'MenuItem',
functional: true, functional: true,
props: { props: {
icon: { icon: {
type: String, type: String,
default: '' default: ''
}, },
title: { title: {
type: String, type: String,
default: '' default: ''
} }
}, },
render(h, context) { render(h, context) {
const { icon, title } = context.props const { icon, title } = context.props
const vnodes = [] const vnodes = []
if (icon) { if (icon) {
vnodes.push(<svg-icon icon-class={icon}/>) vnodes.push(<svg-icon icon-class={icon}/>)
} }
if (title) { if (title) {
if (title.length > 5) { if (title.length > 5) {
vnodes.push(<span slot='title' title={(title)}>{(title)}</span>) vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
} else { } else {
vnodes.push(<span slot='title'>{(title)}</span>) vnodes.push(<span slot='title'>{(title)}</span>)
} }
} }
return vnodes return vnodes
} }
} }
</script> </script>

86
sf-ui/src/layout/components/Sidebar/Link.vue
View File

@ -1,43 +1,43 @@
<template> <template>
<component :is="type" v-bind="linkProps(to)"> <component :is="type" v-bind="linkProps(to)">
<slot /> <slot />
</component> </component>
</template> </template>
<script> <script>
import { isExternal } from '@/utils/validate' import { isExternal } from '@/utils/validate'
export default { export default {
props: { props: {
to: { to: {
type: [String, Object], type: [String, Object],
required: true required: true
} }
}, },
computed: { computed: {
isExternal() { isExternal() {
return isExternal(this.to) return isExternal(this.to)
}, },
type() { type() {
if (this.isExternal) { if (this.isExternal) {
return 'a' return 'a'
} }
return 'router-link' return 'router-link'
} }
}, },
methods: { methods: {
linkProps(to) { linkProps(to) {
if (this.isExternal) { if (this.isExternal) {
return { return {
href: to, href: to,
target: '_blank', target: '_blank',
rel: 'noopener' rel: 'noopener'
} }
} }
return { return {
to: to to: to
} }
} }
} }
} }
</script> </script>

186
sf-ui/src/layout/components/Sidebar/Logo.vue
View File

@ -1,93 +1,93 @@
<template> <template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link> </router-link>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import logoImg from '@/assets/logo/logo.svg' import logoImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss' import variables from '@/assets/styles/variables.scss'
export default { export default {
name: 'SidebarLogo', name: 'SidebarLogo',
props: { props: {
collapse: { collapse: {
type: Boolean, type: Boolean,
required: true required: true
} }
}, },
computed: { computed: {
variables() { variables() {
return variables; return variables;
}, },
sideTheme() { sideTheme() {
return this.$store.state.settings.sideTheme return this.$store.state.settings.sideTheme
} }
}, },
data() { data() {
return { return {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
logo: logoImg logo: logoImg
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sidebarLogoFade-enter-active { .sidebarLogoFade-enter-active {
transition: opacity 1.5s; transition: opacity 1.5s;
} }
.sidebarLogoFade-enter, .sidebarLogoFade-enter,
.sidebarLogoFade-leave-to { .sidebarLogoFade-leave-to {
opacity: 0; opacity: 0;
} }
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
background: #2b2f3a; background: #2b2f3a;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
& .sidebar-logo-link { & .sidebar-logo-link {
height: 100%; height: 100%;
width: 100%; width: 100%;
& .sidebar-logo { & .sidebar-logo {
width: 32px; width: 32px;
height: 32px; height: 32px;
vertical-align: middle; vertical-align: middle;
margin-right: 12px; margin-right: 12px;
} }
& .sidebar-title { & .sidebar-title {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
line-height: 50px; line-height: 50px;
font-size: 14px; font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle; vertical-align: middle;
} }
} }
&.collapse { &.collapse {
.sidebar-logo { .sidebar-logo {
margin-right: 0px; margin-right: 0px;
} }
} }
} }
</style> </style>

200
sf-ui/src/layout/components/Sidebar/SidebarItem.vue
View File

@ -1,100 +1,100 @@
<template> <template>
<div v-if="!item.hidden"> <div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"> <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title"> <template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template> </template>
<sidebar-item <sidebar-item
v-for="child in item.children" v-for="child in item.children"
:key="child.path" :key="child.path"
:is-nest="true" :is-nest="true"
:item="child" :item="child"
:base-path="resolvePath(child.path)" :base-path="resolvePath(child.path)"
class="nest-menu" class="nest-menu"
/> />
</el-submenu> </el-submenu>
</div> </div>
</template> </template>
<script> <script>
import path from 'path' import path from 'path'
import { isExternal } from '@/utils/validate' import { isExternal } from '@/utils/validate'
import Item from './Item' import Item from './Item'
import AppLink from './Link' import AppLink from './Link'
import FixiOSBug from './FixiOSBug' import FixiOSBug from './FixiOSBug'
export default { export default {
name: 'SidebarItem', name: 'SidebarItem',
components: { Item, AppLink }, components: { Item, AppLink },
mixins: [FixiOSBug], mixins: [FixiOSBug],
props: { props: {
// route object // route object
item: { item: {
type: Object, type: Object,
required: true required: true
}, },
isNest: { isNest: {
type: Boolean, type: Boolean,
default: false default: false
}, },
basePath: { basePath: {
type: String, type: String,
default: '' default: ''
} }
}, },
data() { data() {
this.onlyOneChild = null this.onlyOneChild = null
return {} return {}
}, },
methods: { methods: {
hasOneShowingChild(children = [], parent) { hasOneShowingChild(children = [], parent) {
if (!children) { if (!children) {
children = []; children = [];
} }
const showingChildren = children.filter(item => { const showingChildren = children.filter(item => {
if (item.hidden) { if (item.hidden) {
return false return false
} else { } else {
// Temp set(will be used if only has one showing child) // Temp set(will be used if only has one showing child)
this.onlyOneChild = item this.onlyOneChild = item
return true return true
} }
}) })
// When there is only one child router, the child router is displayed by default // When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) { if (showingChildren.length === 1) {
return true return true
} }
// Show parent if there are no child router to display // Show parent if there are no child router to display
if (showingChildren.length === 0) { if (showingChildren.length === 0) {
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true } this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
return true return true
} }
return false return false
}, },
resolvePath(routePath, routeQuery) { resolvePath(routePath, routeQuery) {
if (isExternal(routePath)) { if (isExternal(routePath)) {
return routePath return routePath
} }
if (isExternal(this.basePath)) { if (isExternal(this.basePath)) {
return this.basePath return this.basePath
} }
if (routeQuery) { if (routeQuery) {
let query = JSON.parse(routeQuery); let query = JSON.parse(routeQuery);
return { path: path.resolve(this.basePath, routePath), query: query } return { path: path.resolve(this.basePath, routePath), query: query }
} }
return path.resolve(this.basePath, routePath) return path.resolve(this.basePath, routePath)
} }
} }
} }
</script> </script>

Some files were not shown because too many files have changed in this diff Show More