mirror of
https://github.com/nsnail/NetAdmin.git
synced 2025-07-05 10:08:15 +08:00
feat: ✨ 版本更新日志组件 (#96)
This commit is contained in:
GitHub
@ -68,6 +68,7 @@
|
||||
}
|
||||
|
||||
.app-loading__title {
|
||||
font-family: 'Lucida Console', 'Microsoft YaHei', 'monospace';
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-top: 30px;
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
"element-plus": "^2.5.6",
|
||||
"json-bigint": "^1.0.0",
|
||||
"json5-to-table": "^0.1.8",
|
||||
"markdown-it": "^14.0.0",
|
||||
"markdown-it-emoji": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinyin-match": "^1.2.5",
|
||||
"qrcodejs2": "^0.0.2",
|
||||
|
||||
@ -5,6 +5,17 @@
|
||||
import config from '@/config'
|
||||
import http from '@/utils/request'
|
||||
export default {
|
||||
/**
|
||||
* 获取更新日志
|
||||
*/
|
||||
getChangeLog: {
|
||||
url: `${config.API_URL}/api/sys/tools/get.change.log`,
|
||||
name: `获取更新日志`,
|
||||
post: async function (data = {}, config = {}) {
|
||||
return await http.post(this.url, data, config)
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取模块信息
|
||||
*/
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
:apiObj="$API.sys_dic.pagedQueryContent"
|
||||
:params="form"
|
||||
:props="{ label: 'key', value: 'value' }"
|
||||
:table-width="600"
|
||||
:table-width="60"
|
||||
clearable
|
||||
ref="area">
|
||||
<template #header>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<el-table-column v-bind="$attrs">
|
||||
<template #default="scope">
|
||||
<div @click="click(tool.getNestedProperty(scope.row, $attrs.prop))" class="avatar" style="cursor: pointer">
|
||||
<el-avatar :src="getAvatar(scope)" size="small"></el-avatar>
|
||||
<el-avatar v-if="tool.getNestedProperty(scope.row, $attrs.nestProp)" :src="getAvatar(scope)" size="small"></el-avatar>
|
||||
<el-text tag="ins">{{ tool.getNestedProperty(scope.row, $attrs.nestProp) }}</el-text>
|
||||
</div>
|
||||
<save-dialog v-if="dialog.save" @closed="dialog.save = false" ref="saveDialog"></save-dialog>
|
||||
|
||||
@ -79,6 +79,7 @@
|
||||
<el-input
|
||||
v-if="item.type === 'input' && (!item.condition || item.condition())"
|
||||
v-model="form[item.field[0]][item.field[1]]"
|
||||
v-role="item.role || '*/*/*'"
|
||||
:class="item.class"
|
||||
:placeholder="item.placeholder"
|
||||
:style="item.style"
|
||||
@ -86,6 +87,7 @@
|
||||
<sc-select
|
||||
v-else-if="item.type === 'remote-select' && (!item.condition || item.condition())"
|
||||
v-model="form[item.field[0]][item.field[1]]"
|
||||
v-role="item.role || '*/*/*'"
|
||||
:apiObj="item.api"
|
||||
:class="item.class"
|
||||
:config="item.config"
|
||||
@ -96,6 +98,7 @@
|
||||
<el-select
|
||||
v-else-if="item.type === 'select' && (!item.condition || item.condition())"
|
||||
v-model="form[item.field[0]][item.field[1]]"
|
||||
v-role="item.role || '*/*/*'"
|
||||
:class="item.class"
|
||||
:multiple="item.multiple === true"
|
||||
:placeholder="item.placeholder"
|
||||
@ -108,6 +111,7 @@
|
||||
<el-cascader
|
||||
v-else-if="casLoaded && item.type === 'cascader' && (!item.condition || item.condition())"
|
||||
v-model="form[item.field[0]][item.field[1]]"
|
||||
v-role="item.role || '*/*/*'"
|
||||
:class="item.class"
|
||||
:options="item.options"
|
||||
:placeholder="item.placeholder"
|
||||
@ -116,7 +120,6 @@
|
||||
clearable
|
||||
filterable />
|
||||
</template>
|
||||
|
||||
<el-button-group>
|
||||
<el-button @click="search" icon="el-icon-search" type="primary">查询</el-button>
|
||||
<el-button @click="reset" icon="el-icon-refresh-left">重置</el-button>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
:apiObj="$API.sys_user.pagedQuery"
|
||||
:params="form"
|
||||
:props="{ label: 'userName', value: 'id' }"
|
||||
:table-width="600"
|
||||
:table-width="60"
|
||||
clearable
|
||||
ref="user">
|
||||
<template #header>
|
||||
|
||||
@ -161,7 +161,7 @@ export default {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-size: 1.2rem;
|
||||
color: #45494c;
|
||||
border-bottom: 1px solid #e4e7eb;
|
||||
box-sizing: border-box;
|
||||
@ -228,10 +228,10 @@ export default {
|
||||
/* ---------------------------- */
|
||||
/*常规验证码*/
|
||||
.verify-code {
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 0.4rem;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@ -332,7 +332,7 @@ export default {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
padding: 0.4rem;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -341,7 +341,7 @@ export default {
|
||||
}
|
||||
|
||||
.verify-img-panel .icon-refresh {
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -360,7 +360,7 @@ export default {
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-icon {
|
||||
font-size: 18px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-msg {
|
||||
@ -378,7 +378,7 @@ export default {
|
||||
|
||||
.iconfont {
|
||||
font-family: 'iconfont', serif !important;
|
||||
font-size: 16px;
|
||||
font-size: 1.2rem;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@ -89,34 +89,34 @@ export default {
|
||||
.sc-contextmenu {
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sc-contextmenu__menu {
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
border: 1px solid #e4e7ed;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
min-width: 10rem;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
background: var(--el-bg-color-overlay);
|
||||
box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 3000;
|
||||
list-style-type: none;
|
||||
padding: 10px 0;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.sc-contextmenu__menu > hr {
|
||||
margin: 5px 0;
|
||||
margin: 0.4rem 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
font-size: 0;
|
||||
background-color: #ebeef5;
|
||||
background-color: var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.sc-contextmenu__menu > li {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
padding: 0 17px 0 10px;
|
||||
color: #606266;
|
||||
line-height: 2.5rem;
|
||||
padding: 0 1.3rem 0 0.8rem;
|
||||
color: var(--el-text-color-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
@ -125,8 +125,8 @@ export default {
|
||||
}
|
||||
|
||||
.sc-contextmenu__menu > li:hover {
|
||||
background-color: #ecf5ff;
|
||||
color: #66b1ff;
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary-light-2);
|
||||
}
|
||||
|
||||
.sc-contextmenu__menu > li.disabled {
|
||||
@ -137,13 +137,13 @@ export default {
|
||||
|
||||
.sc-contextmenu__icon {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
width: 1rem;
|
||||
font-size: 1.1rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
.sc-contextmenu__suffix {
|
||||
margin-left: 40px;
|
||||
margin-left: 3rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@ -152,6 +152,6 @@ export default {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
display: none;
|
||||
margin: -11px 0;
|
||||
margin: -0.8rem 0;
|
||||
}
|
||||
</style>
|
||||
@ -801,7 +801,7 @@ export default {
|
||||
.sc-cron:deep(.el-tabs__item) {
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0 7px;
|
||||
padding: 1rem;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
@ -812,20 +812,20 @@ export default {
|
||||
}
|
||||
|
||||
.sc-cron-num h2 {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.sc-cron-num h4 {
|
||||
display: block;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 1rem;
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-radius: 4px;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
|
||||
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
|
||||
.sc-cropper__preview h4 {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #999;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@ -90,7 +90,7 @@ export default {
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--el-message-close-size, 16px);
|
||||
font-size: var(--el-message-close-size, 1.2rem);
|
||||
margin-left: 1rem;
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
@ -107,7 +107,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-dialog:deep(.el-dialog) .el-dialog__body {
|
||||
padding-top: 10px;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {
|
||||
@ -116,7 +116,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 1rem;
|
||||
border-top: 1px solid var(--el-border-color-base);
|
||||
}
|
||||
</style>
|
||||
@ -69,7 +69,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
init: {
|
||||
language_url: '/public/tinymce/langs/zh_CN.js',
|
||||
language_url: '/tinymce/langs/zh_CN.js',
|
||||
language: 'zh_CN',
|
||||
skin_url: '',
|
||||
content_css: '',
|
||||
@ -138,8 +138,8 @@ export default {
|
||||
},
|
||||
created() {
|
||||
const darkMode = this.$TOOL.data.get('APP_DARK') ?? false
|
||||
this.init.skin_url = `/public/tinymce/skins/ui/tinymce-5${darkMode ? '-dark' : ''}`
|
||||
this.init.content_css = `/public/tinymce/skins/content/tinymce-5${darkMode ? '-dark' : ''}/content.css`
|
||||
this.init.skin_url = `/tinymce/skins/ui/tinymce-5${darkMode ? '-dark' : ''}`
|
||||
this.init.content_css = `/tinymce/skins/content/tinymce-5${darkMode ? '-dark' : ''}/content.css`
|
||||
},
|
||||
mounted() {
|
||||
tinymce.init({})
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<el-form v-if="$slots.form" inline label-position="left" label-width="100px" style="margin-top: 18px">
|
||||
<el-form v-if="$slots.form" inline label-position="left" label-width="10rem" style="margin-top: 18px">
|
||||
<slot :formData="formData" name="form"></slot>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
@ -388,7 +388,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-file-select__item__checkbox i {
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
@ -409,7 +409,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-file-select__item__select i {
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -436,7 +436,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-file-select__item__file .item-file i {
|
||||
font-size: 40px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.sc-file-select__item__file .item-file.item-file-doc {
|
||||
@ -485,14 +485,14 @@ export default {
|
||||
}
|
||||
|
||||
.sc-file-select__top .tips {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sc-file-select__top .tips i {
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
font-size: 1.1rem;
|
||||
margin-right: 0.4rem;
|
||||
position: relative;
|
||||
bottom: -0.125em;
|
||||
}
|
||||
|
||||
@ -394,7 +394,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-filter-main h2 {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -405,7 +405,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-filter-main table td {
|
||||
padding: 5px 10px 5px 0;
|
||||
padding: 0.4rem 10px 5px 0;
|
||||
}
|
||||
|
||||
.sc-filter-main table td:deep(.el-input .el-input__inner) {
|
||||
@ -429,7 +429,7 @@ export default {
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-filter-my-list h2 {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
padding: 20px;
|
||||
@ -130,7 +130,7 @@ export default {
|
||||
|
||||
.sc-filter-my-list li label {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
|
||||
@ -123,7 +123,7 @@
|
||||
</template>
|
||||
<!-- rate -->
|
||||
<template v-else-if="item.component === 'rate'">
|
||||
<el-rate v-model="form[item.name]" style="margin-top: 6px"></el-rate>
|
||||
<el-rate v-model="form[item.name]" style="margin-top: 0.5rem"></el-rate>
|
||||
</template>
|
||||
<!-- slider -->
|
||||
<template v-else-if="item.component === 'slider'">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
:apiObj="apiObj"
|
||||
:multiple="item.options.multiple"
|
||||
:props="item.options.props"
|
||||
:table-width="600"
|
||||
:table-width="60"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
v-for="(_item, _index) in item.options.column"
|
||||
|
||||
@ -150,7 +150,7 @@ export default {
|
||||
|
||||
.sc-form-table .move {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-top: 3px;
|
||||
font-size: 1.1rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
</style>
|
||||
@ -13,7 +13,7 @@
|
||||
<el-input v-model="value" :disabled="disabled" :prefix-icon="value || 'el-icon-plus'" readonly></el-input>
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="$t('图标选择器')" :width="760" append-to-body destroy-on-close>
|
||||
<div class="sc-icon-select__dialog" style="margin: -20px 0 -10px 0">
|
||||
<div class="sc-icon-select__dialog">
|
||||
<el-form :rules="{}">
|
||||
<el-form-item prop="searchText">
|
||||
<el-input
|
||||
@ -29,7 +29,7 @@
|
||||
<el-tab-pane v-for="item in data" :key="item.name" lazy>
|
||||
<template #label>
|
||||
{{ item.name }}
|
||||
<el-tag size="small" type="info">{{ item.icons.length }}</el-tag>
|
||||
<el-tag size="small" style="margin-left: 0.5rem" type="info">{{ item.icons.length }}</el-tag>
|
||||
</template>
|
||||
<div class="sc-icon-select__list">
|
||||
<el-scrollbar>
|
||||
@ -140,7 +140,7 @@ export default {
|
||||
|
||||
.sc-icon-select__wrapper:deep(.el-input__icon) {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.sc-icon-select__wrapper.hasValue:deep(.el-input__icon) {
|
||||
@ -148,18 +148,18 @@ export default {
|
||||
}
|
||||
|
||||
.sc-icon-select__list {
|
||||
height: 270px;
|
||||
height: 30rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sc-icon-select__list li {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 5px;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin: 0.4rem;
|
||||
vertical-align: top;
|
||||
transition: all 0.1s;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -176,16 +176,16 @@ export default {
|
||||
.sc-icon-select__list li i {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 26px;
|
||||
font-size: 2rem;
|
||||
color: #6d7882;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.sc-icon-select__list li:hover {
|
||||
box-shadow: 0 0 1px 4px var(--el-color-primary);
|
||||
box-shadow: 0 0 1px 0.3rem var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
|
||||
@ -24,8 +24,8 @@ export default {
|
||||
.sc-state {
|
||||
display: inline-block;
|
||||
background: #000;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-trend-icon {
|
||||
margin-right: 2px;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.sc-trend em {
|
||||
@ -69,11 +69,11 @@ export default {
|
||||
}
|
||||
|
||||
.sc-trend-prefix {
|
||||
margin-right: 2px;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.sc-trend-suffix {
|
||||
margin-left: 2px;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
|
||||
.sc-trend--P {
|
||||
|
||||
@ -42,17 +42,17 @@ export default {
|
||||
.sc-page-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
padding: 20px 25px;
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sc-page-header__icon {
|
||||
width: 50px;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.sc-page-header__icon span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background: #409eff;
|
||||
border-radius: 40%;
|
||||
display: flex;
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
|
||||
.sc-page-header__icon span i {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.sc-page-header__title {
|
||||
@ -70,14 +70,14 @@ export default {
|
||||
}
|
||||
|
||||
.sc-page-header__title h2 {
|
||||
font-size: 17px;
|
||||
font-size: 1.3rem;
|
||||
color: #3c4a54;
|
||||
font-weight: bold;
|
||||
margin-top: 3px;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.sc-page-header__title p {
|
||||
font-size: 13px;
|
||||
font-size: 1rem;
|
||||
color: #999;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@ -103,7 +103,7 @@ export default {
|
||||
display: block;
|
||||
width: 20%;
|
||||
height: inherit;
|
||||
border: 5px solid var(--el-bg-color-overlay);
|
||||
border: 0.4rem solid var(--el-bg-color-overlay);
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
z-index: 1;
|
||||
|
||||
@ -98,15 +98,15 @@ export default {
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
border-radius: 5px;
|
||||
border-radius: 0.4rem;
|
||||
border: 1px solid #ebeef5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.sc-select-loading i {
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.dark .sc-select-loading {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<div class="sc-select-filter">
|
||||
<div v-if="data.length <= 0" class="sc-select-filter__no-data">暂无数据</div>
|
||||
<div v-for="item in data" :key="item.key" class="sc-select-filter__item">
|
||||
<div :style="{ width: labelWidth + 'px' }" class="sc-select-filter__item-title">
|
||||
<div :style="{ width: labelWidth + 'rem' }" class="sc-select-filter__item-title">
|
||||
<label>{{ item.title }}：</label>
|
||||
</div>
|
||||
<div class="sc-select-filter__item-options">
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
labelWidth: { type: Number, default: 80 },
|
||||
labelWidth: { type: Number, default: 6 },
|
||||
outputValueTypeToArray: { type: Boolean, default: false },
|
||||
},
|
||||
data() {
|
||||
@ -137,12 +137,12 @@ export default {
|
||||
}
|
||||
|
||||
.sc-select-filter__item-title {
|
||||
width: 80px;
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.sc-select-filter__item-title label {
|
||||
font-size: 14px;
|
||||
padding-top: 13px;
|
||||
font-size: 1.1rem;
|
||||
padding-top: 1rem;
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
}
|
||||
@ -155,24 +155,24 @@ export default {
|
||||
.sc-select-filter__item-options ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 10px;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.sc-select-filter__item-options li {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
height: 2rem;
|
||||
padding: 0 1rem;
|
||||
border-radius: 32px;
|
||||
margin: 0 10px 10px 0;
|
||||
border-radius: 2.5rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.sc-select-filter__item-options li .el-icon {
|
||||
margin-right: 3px;
|
||||
font-size: 16px;
|
||||
margin-right: 0.2rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.sc-select-filter__item-options li:hover {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
{{ title }}
|
||||
<el-tooltip v-if="tips" effect="light">
|
||||
<template #content>
|
||||
<div style="width: 200px; line-height: 2">
|
||||
<div style="width: 15rem; line-height: 2">
|
||||
{{ tips }}
|
||||
</div>
|
||||
</template>
|
||||
@ -59,19 +59,19 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.sc-statistic-title {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #999;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sc-statistic-tips {
|
||||
margin-left: 5px;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.sc-statistic-content {
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@ -80,16 +80,16 @@ export default {
|
||||
}
|
||||
|
||||
.sc-statistic-content-prefix {
|
||||
margin-right: 5px;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.sc-statistic-content-suffix {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
margin-left: 0.4rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sc-statistic-description {
|
||||
margin-top: 10px;
|
||||
margin-top: 1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
@ -103,63 +103,63 @@ export default {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.setting-column__title span.move_b {
|
||||
width: 30px;
|
||||
width: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.setting-column__title span.show_b {
|
||||
width: 60px;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.setting-column__title span.name_b {
|
||||
width: 140px;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.setting-column__title span.width_b {
|
||||
width: 60px;
|
||||
width: 5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.setting-column__title span.sortable_b {
|
||||
width: 60px;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.setting-column__title span.fixed_b {
|
||||
width: 60px;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.setting-column__list {
|
||||
max-height: 314px;
|
||||
max-height: 25rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.setting-column__list li {
|
||||
list-style: none;
|
||||
margin: 10px 0;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.setting-column__list li > span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.setting-column__list li span.move_b {
|
||||
width: 30px;
|
||||
width: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.setting-column__list li span.show_b {
|
||||
width: 60px;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.setting-column__list li span.name_b {
|
||||
width: 140px;
|
||||
width: 10rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@ -167,16 +167,16 @@ export default {
|
||||
}
|
||||
|
||||
.setting-column__list li span.width_b {
|
||||
width: 60px;
|
||||
width: 5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.setting-column__list li span.sortable_b {
|
||||
width: 60px;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.setting-column__list li span.fixed_b {
|
||||
width: 60px;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.setting-column__list li.ghost {
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
<template #reference>
|
||||
<el-button circle icon="el-icon-setting" style="margin-left: 1rem"></el-button>
|
||||
</template>
|
||||
<el-form label-position="left" label-width="80px">
|
||||
<el-form label-position="left" label-width="10rem">
|
||||
<el-form-item :label="$t('表格尺寸')">
|
||||
<el-radio-group v-model="config.size" @change="configSizeChange" size="small">
|
||||
<el-radio-button label="large">大</el-radio-button>
|
||||
@ -179,7 +179,7 @@ export default {
|
||||
return Number(this.height) ? Number(this.height) + 'px' : this.height
|
||||
},
|
||||
_table_height() {
|
||||
return this.hidePagination && this.hideDo ? '100%' : 'calc(100% - 50px)'
|
||||
return this.hidePagination && this.hideDo ? '100%' : 'calc(100% - 4rem)'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@ -483,11 +483,11 @@ export default {
|
||||
}
|
||||
|
||||
.scTable-table {
|
||||
height: calc(100% - 50px);
|
||||
height: calc(100% - 4rem);
|
||||
}
|
||||
|
||||
.scTable-page {
|
||||
height: 50px;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -503,12 +503,12 @@ export default {
|
||||
}
|
||||
|
||||
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
height: 0.9rem;
|
||||
border-radius: 0.9rem;
|
||||
}
|
||||
|
||||
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
|
||||
width: 12px;
|
||||
border-radius: 12px;
|
||||
width: 0.9rem;
|
||||
border-radius: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="sc-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: { type: String, required: true, default: '' },
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-title {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 20px;
|
||||
font-size: 17px;
|
||||
padding-bottom: 1rem;
|
||||
color: #3c4a54;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -68,8 +68,8 @@ const scCropper = defineAsyncComponent(() => import('@/components/scCropper'))
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: String, default: '' },
|
||||
height: { type: Number, default: 148 },
|
||||
width: { type: Number, default: 148 },
|
||||
height: { type: Number, default: 10 },
|
||||
width: { type: Number, default: 10 },
|
||||
title: { type: String, default: '' },
|
||||
icon: { type: String, default: 'el-icon-plus' },
|
||||
action: { type: String, default: '' },
|
||||
@ -108,8 +108,8 @@ export default {
|
||||
value: '',
|
||||
file: null,
|
||||
style: {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'rem',
|
||||
height: this.height + 'rem',
|
||||
},
|
||||
cropperDialogVisible: false,
|
||||
cropperFile: null,
|
||||
@ -309,14 +309,14 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sc-upload__img-actions span i {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sc-upload__img-actions .del {
|
||||
@ -333,7 +333,7 @@ export default {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
}
|
||||
|
||||
@ -352,7 +352,7 @@ export default {
|
||||
align-items: center;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
z-index: 1;
|
||||
padding: 10px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.sc-upload__progress .el-progress {
|
||||
@ -374,14 +374,14 @@ export default {
|
||||
}
|
||||
|
||||
.sc-upload .file-empty i {
|
||||
font-size: 28px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sc-upload .file-empty h4 {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
color: #8c939d;
|
||||
margin-top: 8px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.sc-upload.sc-upload-round {
|
||||
|
||||
@ -297,7 +297,7 @@ export default {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sc-upload-multiple .el-upload-list__item:hover .sc-upload__item-actions {
|
||||
@ -322,7 +322,7 @@ export default {
|
||||
}
|
||||
|
||||
.sc-upload__item-actions span i {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sc-upload__item-actions .del {
|
||||
|
||||
@ -1,111 +0,0 @@
|
||||
<!--
|
||||
* @Descripttion: xgplayer二次封装
|
||||
* @version: 1.1
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年11月29日12:10:06
|
||||
* @LastEditors: Xujianchen
|
||||
* @LastEditTime: 2023-03-18 13:14:13
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-video" ref="scVideo"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Player from 'xgplayer'
|
||||
import HlsPlayer from 'xgplayer-hls'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true, default: '' },
|
||||
autoplay: { type: Boolean, default: false },
|
||||
controls: { type: Boolean, default: true },
|
||||
loop: { type: Boolean, default: false },
|
||||
isLive: { type: Boolean, default: false },
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src(val) {
|
||||
if (this.player.hasStart) {
|
||||
this.player.src = val
|
||||
} else {
|
||||
this.player.start(val)
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.isLive) {
|
||||
this.initHls()
|
||||
} else {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.player = new Player({
|
||||
el: this.$refs.scVideo,
|
||||
url: this.src,
|
||||
autoplay: this.autoplay,
|
||||
loop: this.loop,
|
||||
controls: this.controls,
|
||||
fluid: true,
|
||||
lang: 'zh-cn',
|
||||
...this.options,
|
||||
})
|
||||
},
|
||||
initHls() {
|
||||
this.player = new HlsPlayer({
|
||||
el: this.$refs.scVideo,
|
||||
url: this.src,
|
||||
autoplay: this.autoplay,
|
||||
loop: this.loop,
|
||||
controls: this.controls,
|
||||
fluid: true,
|
||||
isLive: true,
|
||||
ignores: ['time', 'progress'],
|
||||
lang: 'zh-cn',
|
||||
...this.options,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-video:deep(.danmu) > * {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow:
|
||||
1px 1px 0 #000,
|
||||
-1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px -1px 0 #000;
|
||||
}
|
||||
|
||||
.sc-video:deep(.xgplayer-controls) {
|
||||
background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.sc-video:deep(.xgplayer-progress-tip) {
|
||||
border: 0;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
line-height: 25px;
|
||||
padding: 0 10px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.sc-video:deep(.xgplayer-enter-spinner) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -1,572 +0,0 @@
|
||||
<!--
|
||||
* @Descripttion: 仿钉钉流程设计器
|
||||
* @version: 1.3
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年9月14日08:38:35
|
||||
* @LastEditors: Xujianchen
|
||||
* @LastEditTime: 2023-03-18 13:16:31
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-workflow-design">
|
||||
<div class="box-scale">
|
||||
<node-wrap v-if="nodeConfig" v-model="nodeConfig"></node-wrap>
|
||||
<div class="end-node">
|
||||
<div class="end-node-circle"></div>
|
||||
<div class="end-node-text">流程结束</div>
|
||||
</div>
|
||||
</div>
|
||||
<use-select v-if="selectVisible" @closed="selectVisible = false" ref="useselect"></use-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nodeWrap from './nodeWrap'
|
||||
import useSelect from './select'
|
||||
|
||||
export default {
|
||||
provide() {
|
||||
return {
|
||||
select: this.selectHandle,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
nodeWrap,
|
||||
useSelect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: this.modelValue,
|
||||
selectVisible: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue(val) {
|
||||
this.nodeConfig = val
|
||||
},
|
||||
nodeConfig(val) {
|
||||
this.$emit('update:modelValue', val)
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
selectHandle(type, data) {
|
||||
this.selectVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.useselect.open(type, data)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sc-workflow-design {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sc-workflow-design .box-scale {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 54.5px 0;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
.sc-workflow-design {
|
||||
.node-wrap {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
flex-flow: column wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0 50px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.node-wrap-box {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 220px;
|
||||
min-height: 72px;
|
||||
flex-shrink: 0;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.node-wrap-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 8px 6px 4px;
|
||||
border-color: rgb(202, 202, 202) transparent transparent;
|
||||
background: #f6f8f9;
|
||||
}
|
||||
|
||||
.node-wrap-box.start-node:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.node-wrap-box .title {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
padding-left: 16px;
|
||||
padding-right: 30px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.node-wrap-box .title .icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.node-wrap-box .title .close {
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.node-wrap-box .content {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.node-wrap-box .content .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.node-wrap-box:hover .close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.add-node-btn-box {
|
||||
width: 240px;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.add-node-btn-box:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
margin: auto;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: rgb(202, 202, 202);
|
||||
}
|
||||
|
||||
.add-node-btn {
|
||||
user-select: none;
|
||||
width: 240px;
|
||||
padding: 20px 0 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.add-branch {
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform-origin: center center;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.branch-wrap {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.branch-box-wrap {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
align-items: center;
|
||||
min-height: 270px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.col-box {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: #f6f8f9;
|
||||
}
|
||||
|
||||
.branch-box {
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
min-height: 180px;
|
||||
height: auto;
|
||||
border-bottom: 2px solid #ccc;
|
||||
border-top: 2px solid #ccc;
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.branch-box .col-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
margin: auto;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: rgb(202, 202, 202);
|
||||
}
|
||||
|
||||
.condition-node {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.condition-node-box {
|
||||
padding-top: 30px;
|
||||
padding-right: 50px;
|
||||
padding-left: 50px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.condition-node-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: rgb(202, 202, 202);
|
||||
}
|
||||
|
||||
.auto-judge {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
min-height: 72px;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 4px;
|
||||
padding: 1rem 1rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.auto-judge::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-width: 8px 6px 4px;
|
||||
border-color: rgb(202, 202, 202) transparent transparent;
|
||||
background: rgb(245, 245, 247);
|
||||
}
|
||||
|
||||
.auto-judge .title {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.auto-judge .title .node-title {
|
||||
color: #15bc83;
|
||||
}
|
||||
|
||||
.auto-judge .title .close {
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: #999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auto-judge .title .priority-title {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.auto-judge .content {
|
||||
position: relative;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.auto-judge .content .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.auto-judge:hover {
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.priority-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-left-cover-line,
|
||||
.top-right-cover-line {
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
width: 50%;
|
||||
background-color: #f6f8f9;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.bottom-left-cover-line,
|
||||
.bottom-right-cover-line {
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
width: 50%;
|
||||
background-color: #f6f8f9;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.top-left-cover-line {
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.top-right-cover-line {
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.bottom-left-cover-line {
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.bottom-right-cover-line {
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.end-node {
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
color: rgba(25, 31, 37, 0.4);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.end-node-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
background: #dbdcdc;
|
||||
}
|
||||
|
||||
.end-node-text {
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auto-judge:hover {
|
||||
.sort-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sort-right {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.auto-judge .sort-left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auto-judge .sort-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auto-judge .sort-left:hover,
|
||||
.auto-judge .sort-right:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.auto-judge:after {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
border-radius: 4px;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.auto-judge:hover:after {
|
||||
border: 1px solid #3296fa;
|
||||
box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
|
||||
}
|
||||
|
||||
.node-wrap-box:after {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
border-radius: 4px;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.node-wrap-box:hover:after {
|
||||
border: 1px solid #3296fa;
|
||||
box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-node-popover-body li {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.add-node-popover-body li i {
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-node-popover-body li i:hover {
|
||||
border: 1px solid #3296fa;
|
||||
background: #3296fa;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.add-node-popover-body li p {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.node-wrap-drawer__title {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.node-wrap-drawer__title label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node-wrap-drawer__title label:hover {
|
||||
border-bottom: 1px dashed #409eff;
|
||||
}
|
||||
|
||||
.node-wrap-drawer__title .node-wrap-drawer__title-edit {
|
||||
color: #409eff;
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dark .sc-workflow-design {
|
||||
.node-wrap-box,
|
||||
.auto-judge {
|
||||
background: #2b2b2b;
|
||||
}
|
||||
|
||||
.col-box {
|
||||
background: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.top-left-cover-line,
|
||||
.top-right-cover-line,
|
||||
.bottom-left-cover-line,
|
||||
.bottom-right-cover-line {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.node-wrap-box::before,
|
||||
.auto-judge::before {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.branch-box .add-branch {
|
||||
background: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.end-node .end-node-text {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.auto-judge .sort-left:hover,
|
||||
.auto-judge .sort-right:hover {
|
||||
background: var(--el-bg-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<promoter v-if="nodeConfig.type === 0" v-model="nodeConfig"></promoter>
|
||||
|
||||
<approver v-if="nodeConfig.type === 1" v-model="nodeConfig"></approver>
|
||||
|
||||
<send v-if="nodeConfig.type === 2" v-model="nodeConfig"></send>
|
||||
|
||||
<branch v-if="nodeConfig.type === 4" v-model="nodeConfig">
|
||||
<template v-slot="slot">
|
||||
<node-wrap v-if="slot.node" v-model="slot.node.childNode"></node-wrap>
|
||||
</template>
|
||||
</branch>
|
||||
|
||||
<node-wrap v-if="nodeConfig.childNode" v-model="nodeConfig.childNode"></node-wrap>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import approver from './nodes/approver'
|
||||
import promoter from './nodes/promoter'
|
||||
import branch from './nodes/branch'
|
||||
import send from './nodes/send'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
approver,
|
||||
promoter,
|
||||
branch,
|
||||
send,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue(val) {
|
||||
this.nodeConfig = val
|
||||
},
|
||||
nodeConfig(val) {
|
||||
this.$emit('update:modelValue', val)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<div class="add-node-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<el-popover :hide-after="0" :show-after="0" :width="270" placement="right-start" trigger="click">
|
||||
<template #reference>
|
||||
<el-button circle icon="el-icon-plus" type="primary"></el-button>
|
||||
</template>
|
||||
<div class="add-node-popover-body">
|
||||
<ul>
|
||||
<li>
|
||||
<el-icon @click="addType(1)" style="color: #ff943e">
|
||||
<el-icon-user-filled />
|
||||
</el-icon>
|
||||
<p>审批节点</p>
|
||||
</li>
|
||||
<li>
|
||||
<el-icon @click="addType(2)" style="color: #3296fa">
|
||||
<el-icon-promotion />
|
||||
</el-icon>
|
||||
<p>抄送节点</p>
|
||||
</li>
|
||||
<li>
|
||||
<el-icon @click="addType(4)" style="color: #15bc83">
|
||||
<el-icon-share />
|
||||
</el-icon>
|
||||
<p>条件分支</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
addType(type) {
|
||||
let node = {}
|
||||
if (type === 1) {
|
||||
node = {
|
||||
nodeName: '审核人',
|
||||
type: 1, //节点类型
|
||||
setType: 1, //审核人类型
|
||||
nodeUserList: [], //审核人成员
|
||||
nodeRoleList: [], //审核角色
|
||||
examineLevel: 1, //指定主管层级
|
||||
directorLevel: 1, //自定义连续主管审批层级
|
||||
selectMode: 1, //发起人自选类型
|
||||
termAuto: false, //审批期限超时自动审批
|
||||
term: 0, //审批期限
|
||||
termMode: 1, //审批期限超时后执行类型
|
||||
examineMode: 1, //多人审批时审批方式
|
||||
directorMode: 0, //连续主管审批方式
|
||||
childNode: this.modelValue,
|
||||
}
|
||||
} else if (type === 2) {
|
||||
node = {
|
||||
nodeName: '抄送人',
|
||||
type: 2,
|
||||
userSelectFlag: true,
|
||||
nodeUserList: [],
|
||||
childNode: this.modelValue,
|
||||
}
|
||||
} else if (type === 4) {
|
||||
node = {
|
||||
nodeName: '条件路由',
|
||||
type: 4,
|
||||
conditionNodes: [
|
||||
{
|
||||
nodeName: '条件1',
|
||||
type: 3,
|
||||
priorityLevel: 1,
|
||||
conditionMode: 1,
|
||||
conditionList: [],
|
||||
},
|
||||
{
|
||||
nodeName: '条件2',
|
||||
type: 3,
|
||||
priorityLevel: 2,
|
||||
conditionMode: 1,
|
||||
conditionList: [],
|
||||
},
|
||||
],
|
||||
childNode: this.modelValue,
|
||||
}
|
||||
}
|
||||
this.$emit('update:modelValue', node)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,224 +0,0 @@
|
||||
<template>
|
||||
<div class="node-wrap">
|
||||
<div @click="show" class="node-wrap-box">
|
||||
<div class="title" style="background: #ff943e">
|
||||
<el-icon class="icon">
|
||||
<el-icon-user-filled />
|
||||
</el-icon>
|
||||
<span>{{ nodeConfig.nodeName }}</span>
|
||||
<el-icon @click.stop="delNode()" class="close">
|
||||
<el-icon-close />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
|
||||
<span v-else class="placeholder">请选择</span>
|
||||
</div>
|
||||
</div>
|
||||
<add-node v-model="nodeConfig.childNode"></add-node>
|
||||
<el-drawer v-model="drawer" :size="500" :title="$t('审批人设置')" append-to-body destroy-on-close>
|
||||
<template #header>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label v-if="!isEditTitle" @click="editTitle"
|
||||
>{{ form.nodeName }}
|
||||
<el-icon class="node-wrap-drawer__title-edit">
|
||||
<el-icon-edit />
|
||||
</el-icon>
|
||||
</label>
|
||||
<el-input
|
||||
v-if="isEditTitle"
|
||||
v-model="form.nodeName"
|
||||
@blur="saveTitle"
|
||||
@keyup.enter="saveTitle"
|
||||
clearable
|
||||
ref="nodeTitle"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
<el-container>
|
||||
<el-main style="padding: 0 20px 20px 20px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item :label="$t('审批人员类型')">
|
||||
<el-select v-model="form.setType">
|
||||
<el-option :label="$t('指定成员')" :value="1"></el-option>
|
||||
<el-option :label="$t('主管')" :value="2"></el-option>
|
||||
<el-option :label="$t('角色')" :value="3"></el-option>
|
||||
<el-option :label="$t('发起人自选')" :value="4"></el-option>
|
||||
<el-option :label="$t('发起人自己')" :value="5"></el-option>
|
||||
<el-option :label="$t('连续多级主管')" :value="7"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.setType === 1" :label="$t('选择成员')">
|
||||
<el-button @click="selectHandle(1, form.nodeUserList)" icon="el-icon-plus" round type="primary">选择人员</el-button>
|
||||
<div class="tags-list">
|
||||
<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" @close="delUser(index)" closable
|
||||
>{{ user.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.setType === 2" :label="$t('指定主管')">
|
||||
发起人的第
|
||||
<el-input-number v-model="form.examineLevel" :min="1" />
|
||||
级主管
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.setType === 3" :label="$t('选择角色')">
|
||||
<el-button @click="selectHandle(2, form.nodeRoleList)" icon="el-icon-plus" round type="primary">选择角色</el-button>
|
||||
<div class="tags-list">
|
||||
<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" @close="delRole(index)" closable type="info"
|
||||
>{{ role.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.setType === 4" :label="$t('发起人自选')">
|
||||
<el-radio-group v-model="form.selectMode">
|
||||
<el-radio :label="1">自选一个人</el-radio>
|
||||
<el-radio :label="2">自选多个人</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.setType === 7" :label="$t('连续主管审批终点')">
|
||||
<el-radio-group v-model="form.directorMode">
|
||||
<el-radio :label="0">直到最上层主管</el-radio>
|
||||
<el-radio :label="1">自定义审批终点</el-radio>
|
||||
</el-radio-group>
|
||||
<p v-if="form.directorMode === 1">
|
||||
直到发起人的第
|
||||
<el-input-number v-model="form.directorLevel" :min="1" />
|
||||
级主管
|
||||
</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="">
|
||||
<el-checkbox v-model="form.termAuto" :label="$t('超时自动审批')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<template v-if="form.termAuto">
|
||||
<el-form-item :label="$t('审批期限（为 0 则不生效）')">
|
||||
<el-input-number v-model="form.term" :min="0" />
|
||||
小时
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('审批期限超时后执行')">
|
||||
<el-radio-group v-model="form.termMode">
|
||||
<el-radio :label="0">自动通过</el-radio>
|
||||
<el-radio :label="1">自动拒绝</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item :label="$t('多人审批时审批方式')">
|
||||
<el-radio-group v-model="form.examineMode">
|
||||
<p style="width: 100%">
|
||||
<el-radio :label="1">按顺序依次审批</el-radio>
|
||||
</p>
|
||||
<p style="width: 100%">
|
||||
<el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio>
|
||||
</p>
|
||||
<p style="width: 100%">
|
||||
<el-radio :label="3">或签 (有一人审批通过即可)</el-radio>
|
||||
</p>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button @click="save" type="primary">保存</el-button>
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode'
|
||||
|
||||
export default {
|
||||
inject: ['select'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
addNode,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
form: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.form = {}
|
||||
this.form = JSON.parse(JSON.stringify(this.nodeConfig))
|
||||
this.drawer = true
|
||||
},
|
||||
editTitle() {
|
||||
this.isEditTitle = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.nodeTitle.focus()
|
||||
})
|
||||
},
|
||||
saveTitle() {
|
||||
this.isEditTitle = false
|
||||
},
|
||||
save() {
|
||||
this.$emit('update:modelValue', this.form)
|
||||
this.drawer = false
|
||||
},
|
||||
delNode() {
|
||||
this.$emit('update:modelValue', this.nodeConfig.childNode)
|
||||
},
|
||||
delUser(index) {
|
||||
this.form.nodeUserList.splice(index, 1)
|
||||
},
|
||||
delRole(index) {
|
||||
this.form.nodeRoleList.splice(index, 1)
|
||||
},
|
||||
selectHandle(type, data) {
|
||||
this.select(type, data)
|
||||
},
|
||||
toText(nodeConfig) {
|
||||
if (nodeConfig.setType === 1) {
|
||||
if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length > 0) {
|
||||
return nodeConfig.nodeUserList.map((item) => item.name).join('、')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
} else if (nodeConfig.setType === 2) {
|
||||
return nodeConfig.examineLevel === 1 ? '直接主管' : `发起人的第${nodeConfig.examineLevel}级主管`
|
||||
} else if (nodeConfig.setType === 3) {
|
||||
if (nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length > 0) {
|
||||
const roles = nodeConfig.nodeRoleList.map((item) => item.name).join('、')
|
||||
return '角色-' + roles
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
} else if (nodeConfig.setType === 4) {
|
||||
return '发起人自选'
|
||||
} else if (nodeConfig.setType === 5) {
|
||||
return '发起人自己'
|
||||
} else if (nodeConfig.setType === 7) {
|
||||
return '连续多级主管'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,242 +0,0 @@
|
||||
<template>
|
||||
<div class="branch-wrap">
|
||||
<div class="branch-box-wrap">
|
||||
<div class="branch-box">
|
||||
<el-button @click="addTerm" class="add-branch" plain round type="success">添加条件</el-button>
|
||||
<div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
|
||||
<div class="condition-node">
|
||||
<div class="condition-node-box">
|
||||
<div @click="show(index)" class="auto-judge">
|
||||
<div v-if="index !== 0" @click.stop="arrTransfer(index, -1)" class="sort-left">
|
||||
<el-icon>
|
||||
<el-icon-arrow-left />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span class="node-title">{{ item.nodeName }}</span>
|
||||
<span class="priority-title">优先级{{ item.priorityLevel }}</span>
|
||||
<el-icon @click.stop="delTerm(index)" class="close">
|
||||
<el-icon-close />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span v-if="toText(nodeConfig, index)">{{ toText(nodeConfig, index) }}</span>
|
||||
<span v-else class="placeholder">请设置条件</span>
|
||||
</div>
|
||||
<div v-if="index !== nodeConfig.conditionNodes.length - 1" @click.stop="arrTransfer(index)" class="sort-right">
|
||||
<el-icon>
|
||||
<el-icon-arrow-right />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<add-node v-model="item.childNode"></add-node>
|
||||
</div>
|
||||
</div>
|
||||
<slot v-if="item.childNode" :node="item"></slot>
|
||||
<div v-if="index === 0" class="top-left-cover-line"></div>
|
||||
<div v-if="index === 0" class="bottom-left-cover-line"></div>
|
||||
<div v-if="index === nodeConfig.conditionNodes.length - 1" class="top-right-cover-line"></div>
|
||||
<div v-if="index === nodeConfig.conditionNodes.length - 1" class="bottom-right-cover-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<add-node v-model="nodeConfig.childNode"></add-node>
|
||||
</div>
|
||||
<el-drawer v-model="drawer" :size="600" :title="$t('条件设置')" append-to-body destroy-on-close>
|
||||
<template #header>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label v-if="!isEditTitle" @click="editTitle"
|
||||
>{{ form.nodeName }}
|
||||
<el-icon class="node-wrap-drawer__title-edit">
|
||||
<el-icon-edit />
|
||||
</el-icon>
|
||||
</label>
|
||||
<el-input
|
||||
v-if="isEditTitle"
|
||||
v-model="form.nodeName"
|
||||
@blur="saveTitle"
|
||||
@keyup.enter="saveTitle"
|
||||
clearable
|
||||
ref="nodeTitle"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
<el-container>
|
||||
<el-main style="padding: 0 20px 20px 20px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item :label="$t('条件关系')">
|
||||
<el-radio-group v-model="form.conditionMode">
|
||||
<el-radio :label="1">且</el-radio>
|
||||
<el-radio :label="2">或</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item>
|
||||
<el-table :data="form.conditionList">
|
||||
<el-table-column :label="$t('描述')" prop="label">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.label" :placeholder="$t('描述')"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('条件字段')" prop="field" width="130">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.field" :placeholder="$t('条件字段')"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('运算符')" prop="operator" width="130">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.operator" placeholder="Select">
|
||||
<el-option :label="$t('等于')" value="="></el-option>
|
||||
<el-option :label="$t('不等于')" value="!="></el-option>
|
||||
<el-option :label="$t('大于')" value=">"></el-option>
|
||||
<el-option :label="$t('大于等于')" value=">="></el-option>
|
||||
<el-option :label="$t('小于')" value="<"></el-option>
|
||||
<el-option :label="$t('小于等于')" value="<="></el-option>
|
||||
<el-option :label="$t('包含')" value="include"></el-option>
|
||||
<el-option :label="$t('不包含')" value="notinclude"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('值')" prop="value" width="100">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.value" :placeholder="$t('值')"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('移除')" prop="value" width="55">
|
||||
<template #default="scope">
|
||||
<el-link :underline="false" @click="deleteConditionList(scope.$index)" type="danger">移除</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<p>
|
||||
<el-button @click="addConditionList" icon="el-icon-plus" round type="primary">增加条件</el-button>
|
||||
</p>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button @click="save" type="primary">保存</el-button>
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
addNode,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
index: 0,
|
||||
form: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show(index) {
|
||||
this.index = index
|
||||
this.form = {}
|
||||
this.form = JSON.parse(JSON.stringify(this.nodeConfig.conditionNodes[index]))
|
||||
this.drawer = true
|
||||
},
|
||||
editTitle() {
|
||||
this.isEditTitle = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.nodeTitle.focus()
|
||||
})
|
||||
},
|
||||
saveTitle() {
|
||||
this.isEditTitle = false
|
||||
},
|
||||
save() {
|
||||
this.nodeConfig.conditionNodes[this.index] = this.form
|
||||
this.$emit('update:modelValue', this.nodeConfig)
|
||||
this.drawer = false
|
||||
},
|
||||
addTerm() {
|
||||
let len = this.nodeConfig.conditionNodes.length + 1
|
||||
this.nodeConfig.conditionNodes.push({
|
||||
nodeName: '条件' + len,
|
||||
type: 3,
|
||||
priorityLevel: len,
|
||||
conditionMode: 1,
|
||||
conditionList: [],
|
||||
})
|
||||
},
|
||||
delTerm(index) {
|
||||
this.nodeConfig.conditionNodes.splice(index, 1)
|
||||
if (this.nodeConfig.conditionNodes.length === 1) {
|
||||
if (this.nodeConfig.childNode) {
|
||||
if (this.nodeConfig.conditionNodes[0].childNode) {
|
||||
this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
|
||||
} else {
|
||||
this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
|
||||
}
|
||||
}
|
||||
this.$emit('update:modelValue', this.nodeConfig.conditionNodes[0].childNode)
|
||||
}
|
||||
},
|
||||
reData(data, addData) {
|
||||
if (!data.childNode) {
|
||||
data.childNode = addData
|
||||
} else {
|
||||
this.reData(data.childNode, addData)
|
||||
}
|
||||
},
|
||||
arrTransfer(index, type = 1) {
|
||||
this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0]
|
||||
this.nodeConfig.conditionNodes.map((item, index) => {
|
||||
item.priorityLevel = index + 1
|
||||
})
|
||||
this.$emit('update:modelValue', this.nodeConfig)
|
||||
},
|
||||
addConditionList() {
|
||||
this.form.conditionList.push({
|
||||
label: '',
|
||||
field: '',
|
||||
operator: '=',
|
||||
value: '',
|
||||
})
|
||||
},
|
||||
deleteConditionList(index) {
|
||||
this.form.conditionList.splice(index, 1)
|
||||
},
|
||||
toText(nodeConfig, index) {
|
||||
const { conditionList } = nodeConfig.conditionNodes[index]
|
||||
if (conditionList && conditionList.length === 1) {
|
||||
return conditionList.map((item) => `${item.label}${item.operator}${item.value}`).join(' 和 ')
|
||||
} else if (conditionList && conditionList.length > 1) {
|
||||
const conditionModeText = nodeConfig.conditionNodes[index].conditionMode === 1 ? '且行' : '或行'
|
||||
return conditionList.length + '个条件，' + conditionModeText
|
||||
} else {
|
||||
if (index === nodeConfig.conditionNodes.length - 1) {
|
||||
return '其他条件进入此流程'
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<div class="node-wrap">
|
||||
<div @click="show" class="node-wrap-box start-node">
|
||||
<div class="title" style="background: #576a95">
|
||||
<el-icon class="icon">
|
||||
<el-icon-user-filled />
|
||||
</el-icon>
|
||||
<span>{{ nodeConfig.nodeName }}</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span>{{ toText(nodeConfig) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<add-node v-model="nodeConfig.childNode"></add-node>
|
||||
<el-drawer v-model="drawer" :size="500" :title="$t('发起人')" append-to-body destroy-on-close>
|
||||
<template #header>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label v-if="!isEditTitle" @click="editTitle"
|
||||
>{{ form.nodeName }}
|
||||
<el-icon class="node-wrap-drawer__title-edit">
|
||||
<el-icon-edit />
|
||||
</el-icon>
|
||||
</label>
|
||||
<el-input
|
||||
v-if="isEditTitle"
|
||||
v-model="form.nodeName"
|
||||
@blur="saveTitle"
|
||||
@keyup.enter="saveTitle"
|
||||
clearable
|
||||
ref="nodeTitle"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
<el-container>
|
||||
<el-main style="padding: 0 20px 20px 20px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item :label="$t('谁可以发起此审批')">
|
||||
<el-button @click="selectHandle(2, form.nodeRoleList)" icon="el-icon-plus" round type="primary">选择角色</el-button>
|
||||
<div class="tags-list">
|
||||
<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" @close="delRole(index)" closable type="info"
|
||||
>{{ role.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-alert
|
||||
v-if="form.nodeRoleList.length === 0"
|
||||
:closable="false"
|
||||
:title="$t('不指定则默认所有人都可发起此审批')"
|
||||
type="info" />
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button @click="save" type="primary">保存</el-button>
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode'
|
||||
|
||||
export default {
|
||||
inject: ['select'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
addNode,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
form: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.form = {}
|
||||
this.form = JSON.parse(JSON.stringify(this.nodeConfig))
|
||||
this.isEditTitle = false
|
||||
this.drawer = true
|
||||
},
|
||||
editTitle() {
|
||||
this.isEditTitle = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.nodeTitle.focus()
|
||||
})
|
||||
},
|
||||
saveTitle() {
|
||||
this.isEditTitle = false
|
||||
},
|
||||
selectHandle(type, data) {
|
||||
this.select(type, data)
|
||||
},
|
||||
delRole(index) {
|
||||
this.form.nodeRoleList.splice(index, 1)
|
||||
},
|
||||
save() {
|
||||
this.$emit('update:modelValue', this.form)
|
||||
this.drawer = false
|
||||
},
|
||||
toText(nodeConfig) {
|
||||
if (nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length > 0) {
|
||||
return nodeConfig.nodeRoleList.map((item) => item.name).join('、')
|
||||
} else {
|
||||
return '所有人'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<div class="node-wrap">
|
||||
<div @click="show" class="node-wrap-box">
|
||||
<div class="title" style="background: #3296fa">
|
||||
<el-icon class="icon">
|
||||
<el-icon-promotion />
|
||||
</el-icon>
|
||||
<span>{{ nodeConfig.nodeName }}</span>
|
||||
<el-icon @click.stop="delNode()" class="close">
|
||||
<el-icon-close />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
|
||||
<span v-else class="placeholder">请选择人员</span>
|
||||
</div>
|
||||
</div>
|
||||
<add-node v-model="nodeConfig.childNode"></add-node>
|
||||
<el-drawer v-model="drawer" :size="500" :title="$t('抄送人设置')" append-to-body destroy-on-close>
|
||||
<template #header>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label v-if="!isEditTitle" @click="editTitle"
|
||||
>{{ form.nodeName }}
|
||||
<el-icon class="node-wrap-drawer__title-edit">
|
||||
<el-icon-edit />
|
||||
</el-icon>
|
||||
</label>
|
||||
<el-input
|
||||
v-if="isEditTitle"
|
||||
v-model="form.nodeName"
|
||||
@blur="saveTitle"
|
||||
@keyup.enter="saveTitle"
|
||||
clearable
|
||||
ref="nodeTitle"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
<el-container>
|
||||
<el-main style="padding: 0 20px 20px 20px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item :label="$t('选择要抄送的人员')">
|
||||
<el-button @click="selectHandle(1, form.nodeUserList)" icon="el-icon-plus" round type="primary">选择人员</el-button>
|
||||
<div class="tags-list">
|
||||
<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" @close="delUser(index)" closable
|
||||
>{{ user.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-checkbox v-model="form.userSelectFlag" :label="$t('允许发起人自选抄送人')"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button @click="save" type="primary">保存</el-button>
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode'
|
||||
|
||||
export default {
|
||||
inject: ['select'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
addNode,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
form: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.form = {}
|
||||
this.form = JSON.parse(JSON.stringify(this.nodeConfig))
|
||||
this.drawer = true
|
||||
},
|
||||
editTitle() {
|
||||
this.isEditTitle = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.nodeTitle.focus()
|
||||
})
|
||||
},
|
||||
saveTitle() {
|
||||
this.isEditTitle = false
|
||||
},
|
||||
save() {
|
||||
this.$emit('update:modelValue', this.form)
|
||||
this.drawer = false
|
||||
},
|
||||
delNode() {
|
||||
this.$emit('update:modelValue', this.nodeConfig.childNode)
|
||||
},
|
||||
delUser(index) {
|
||||
this.form.nodeUserList.splice(index, 1)
|
||||
},
|
||||
selectHandle(type, data) {
|
||||
this.select(type, data)
|
||||
},
|
||||
toText(nodeConfig) {
|
||||
if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length > 0) {
|
||||
return nodeConfig.nodeUserList.map((item) => item.name).join('、')
|
||||
} else {
|
||||
if (nodeConfig.userSelectFlag) {
|
||||
return '发起人自选'
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,414 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="titleMap[type - 1]"
|
||||
:width="type === 1 ? 680 : 460"
|
||||
@closed="$emit('closed')"
|
||||
append-to-body
|
||||
destroy-on-close>
|
||||
<template v-if="type === 1">
|
||||
<div class="sc-user-select">
|
||||
<div class="sc-user-select__left">
|
||||
<div class="sc-user-select__search">
|
||||
<el-input v-model="keyword" :placeholder="$t('搜索成员')" prefix-icon="el-icon-search">
|
||||
<template #append>
|
||||
<el-button @click="search" icon="el-icon-search"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="sc-user-select__select">
|
||||
<div v-loading="showGrouploading" class="sc-user-select__tree">
|
||||
<el-scrollbar>
|
||||
<el-tree
|
||||
:current-node-key="groupId"
|
||||
:data="group"
|
||||
:expand-on-click-node="false"
|
||||
:node-key="groupProps.key"
|
||||
:props="groupProps"
|
||||
@node-click="groupClick"
|
||||
class="menu"
|
||||
highlight-current
|
||||
ref="groupTree" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-loading="showUserloading" class="sc-user-select__user">
|
||||
<div class="sc-user-select__user__list">
|
||||
<el-scrollbar ref="userScrollbar">
|
||||
<el-tree
|
||||
:data="user"
|
||||
:default-checked-keys="selectedIds"
|
||||
:node-key="userProps.key"
|
||||
:props="userProps"
|
||||
@check-change="userClick"
|
||||
check-on-click-node
|
||||
class="menu"
|
||||
ref="userTree"
|
||||
show-checkbox></el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<footer>
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
@current-change="paginationChange"
|
||||
background
|
||||
layout="prev,next"
|
||||
small></el-pagination>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-user-select__toicon">
|
||||
<el-icon>
|
||||
<el-icon-arrow-right />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="sc-user-select__selected">
|
||||
<header>已选 ({{ selected.length }})</header>
|
||||
<ul>
|
||||
<el-scrollbar>
|
||||
<li v-for="(item, index) in selected" :key="item.id">
|
||||
<span class="name">
|
||||
<el-avatar size="small">{{ item.name.substring(0, 1) }}</el-avatar>
|
||||
<label>{{ item.name }}</label>
|
||||
</span>
|
||||
<span class="delete">
|
||||
<el-button @click="deleteSelected(index)" circle icon="el-icon-delete" size="small" type="danger"></el-button>
|
||||
</span>
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="type === 2">
|
||||
<div class="sc-user-select sc-user-select-role">
|
||||
<div class="sc-user-select__left">
|
||||
<div class="sc-user-select__select">
|
||||
<div v-loading="showGrouploading" class="sc-user-select__tree">
|
||||
<el-scrollbar>
|
||||
<el-tree
|
||||
:data="role"
|
||||
:default-checked-keys="selectedIds"
|
||||
:expand-on-click-node="false"
|
||||
:node-key="roleProps.key"
|
||||
:props="roleProps"
|
||||
@check-change="roleClick"
|
||||
check-on-click-node
|
||||
check-strictly
|
||||
class="menu"
|
||||
ref="groupTree"
|
||||
show-checkbox />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-user-select__toicon">
|
||||
<el-icon>
|
||||
<el-icon-arrow-right />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="sc-user-select__selected">
|
||||
<header>已选 ({{ selected.length }})</header>
|
||||
<ul>
|
||||
<el-scrollbar>
|
||||
<li v-for="(item, index) in selected" :key="item.id">
|
||||
<span class="name">
|
||||
<label>{{ item.name }}</label>
|
||||
</span>
|
||||
<span class="delete">
|
||||
<el-button @click="deleteSelected(index)" circle icon="el-icon-delete" size="small" type="danger"></el-button>
|
||||
</span>
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button @click="save" type="primary">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config/workflow'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Boolean, default: false },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupProps: config.group.props,
|
||||
userProps: config.user.props,
|
||||
roleProps: config.role.props,
|
||||
|
||||
titleMap: ['人员选择', '角色选择'],
|
||||
dialogVisible: false,
|
||||
showGrouploading: false,
|
||||
showUserloading: false,
|
||||
keyword: '',
|
||||
groupId: '',
|
||||
pageSize: config.user.pageSize,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
group: [],
|
||||
user: [],
|
||||
role: [],
|
||||
type: 1,
|
||||
selected: [],
|
||||
value: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedIds() {
|
||||
return this.selected.map((t) => t.id)
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//打开赋值
|
||||
open(type, data) {
|
||||
this.type = type
|
||||
this.value = data || []
|
||||
this.selected = JSON.parse(JSON.stringify(data || []))
|
||||
this.dialogVisible = true
|
||||
|
||||
if (this.type === 1) {
|
||||
this.getGroup()
|
||||
this.getUser()
|
||||
} else if (this.type === 2) {
|
||||
this.getRole()
|
||||
}
|
||||
},
|
||||
//获取组织
|
||||
async getGroup() {
|
||||
this.showGrouploading = true
|
||||
const res = await config.group.apiObj.get()
|
||||
this.showGrouploading = false
|
||||
const allNode = { [config.group.props.key]: '', [config.group.props.label]: '所有' }
|
||||
res.data.unshift(allNode)
|
||||
this.group = config.group.parseData(res).rows
|
||||
},
|
||||
//获取用户
|
||||
async getUser() {
|
||||
this.showUserloading = true
|
||||
const params = {
|
||||
[config.user.request.keyword]: this.keyword || null,
|
||||
[config.user.request.groupId]: this.groupId || null,
|
||||
[config.user.request.page]: this.currentPage,
|
||||
[config.user.request.pageSize]: this.pageSize,
|
||||
}
|
||||
const res = await config.user.apiObj.get(params)
|
||||
this.showUserloading = false
|
||||
this.user = config.user.parseData(res).rows
|
||||
this.total = config.user.parseData(res).total || 0
|
||||
this.$refs.userScrollbar.setScrollTop(0)
|
||||
},
|
||||
//获取角色
|
||||
async getRole() {
|
||||
this.showGrouploading = true
|
||||
const res = await config.role.apiObj.get()
|
||||
this.showGrouploading = false
|
||||
this.role = config.role.parseData(res).rows
|
||||
},
|
||||
//组织点击
|
||||
groupClick(data) {
|
||||
this.keyword = ''
|
||||
this.currentPage = 1
|
||||
this.groupId = data[config.group.props.key]
|
||||
this.getUser()
|
||||
},
|
||||
//用户点击
|
||||
userClick(data, checked) {
|
||||
if (checked) {
|
||||
this.selected.push({
|
||||
id: data[config.user.props.key],
|
||||
name: data[config.user.props.label],
|
||||
})
|
||||
} else {
|
||||
this.selected = this.selected.filter((item) => item.id !== data[config.user.props.key])
|
||||
}
|
||||
},
|
||||
//用户分页点击
|
||||
paginationChange() {
|
||||
this.getUser()
|
||||
},
|
||||
//用户搜索
|
||||
search() {
|
||||
this.groupId = ''
|
||||
this.$refs.groupTree.setCurrentKey(this.groupId)
|
||||
this.currentPage = 1
|
||||
this.getUser()
|
||||
},
|
||||
//删除已选
|
||||
deleteSelected(index) {
|
||||
this.selected.splice(index, 1)
|
||||
if (this.type === 1) {
|
||||
this.$refs.userTree.setCheckedKeys(this.selectedIds)
|
||||
} else if (this.type === 2) {
|
||||
this.$refs.groupTree.setCheckedKeys(this.selectedIds)
|
||||
}
|
||||
},
|
||||
//角色点击
|
||||
roleClick(data, checked) {
|
||||
if (checked) {
|
||||
this.selected.push({
|
||||
id: data[config.role.props.key],
|
||||
name: data[config.role.props.label],
|
||||
})
|
||||
} else {
|
||||
this.selected = this.selected.filter((item) => item.id !== data[config.role.props.key])
|
||||
}
|
||||
},
|
||||
//提交保存
|
||||
save() {
|
||||
this.value.splice(0, this.value.length)
|
||||
this.selected.map((item) => {
|
||||
this.value.push(item)
|
||||
})
|
||||
this.dialogVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-user-select {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sc-user-select__left {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.sc-user-select__right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sc-user-select__search {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.sc-user-select__select {
|
||||
display: flex;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
background: var(--el-color-white);
|
||||
}
|
||||
|
||||
.sc-user-select__tree {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
border-right: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.sc-user-select__user {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sc-user-select__user__list {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sc-user-select__user footer {
|
||||
height: 36px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.sc-user-select__toicon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.sc-user-select__toicon i {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #ccc;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sc-user-select__selected {
|
||||
height: 345px;
|
||||
width: 200px;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
background: var(--el-color-white);
|
||||
}
|
||||
|
||||
.sc-user-select__selected header {
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding: 0 1rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sc-user-select__selected ul {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sc-user-select__selected li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 5px 5px 1rem;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.sc-user-select__selected li .name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sc-user-select__selected li .name .el-avatar {
|
||||
background: #409eff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.sc-user-select__selected li .delete {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sc-user-select__selected li:hover {
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.sc-user-select__selected li:hover .delete {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sc-user-select-role .sc-user-select__left {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.sc-user-select-role .sc-user-select__tree {
|
||||
border: none;
|
||||
height: 343px;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .sc-user-select__selected li:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .sc-user-select__toicon i {
|
||||
background: #383838;
|
||||
}
|
||||
</style>
|
||||
@ -60,9 +60,9 @@ const DEFAULT_CONFIG = {
|
||||
//控制台首页默认布局
|
||||
DEFAULT_GRID: {
|
||||
//默认分栏数量和宽度 例如 [24] [18,6] [8,8,8] [6,12,6]
|
||||
layout: [24],
|
||||
layout: [24, 12, 12],
|
||||
//小组件分布，com取值:views/home/components 文件名
|
||||
compsList: [['ver']],
|
||||
compsList: [['ver'], ['modules'], ['change-log']],
|
||||
},
|
||||
|
||||
//默认头像
|
||||
|
||||
@ -6,5 +6,5 @@
|
||||
|
||||
export default {
|
||||
//是否显示第三方授权登录
|
||||
MY_SHOW_LOGIN_OAUTH: true,
|
||||
MY_SHOW_LOGIN_OAUTH: false,
|
||||
}
|
||||
@ -28,7 +28,6 @@ import scStatusIndicator from '@/components/scMini/scStatusIndicator'
|
||||
import scTable from '@/components/scTable'
|
||||
import scTableColumn from '@/components/scTable/column.js'
|
||||
import scTableSelect from '@/components/scTableSelect'
|
||||
import scTitle from '@/components/scTitle'
|
||||
import scTrend from '@/components/scMini/scTrend'
|
||||
import scUpload from '@/components/scUpload'
|
||||
import scUploadFile from '@/components/scUpload/file'
|
||||
@ -98,7 +97,6 @@ export default {
|
||||
app.component('scTable', scTable)
|
||||
app.component('scTableColumn', scTableColumn)
|
||||
app.component('scTableSelect', scTableSelect)
|
||||
app.component('scTitle', scTitle)
|
||||
app.component('scTrend', scTrend)
|
||||
app.component('scUpload', scUpload)
|
||||
app.component('scUploadFile', scUploadFile)
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<div class="sc-search-result">
|
||||
<div v-if="result.length <= 0" class="sc-search-no-result">暂无搜索结果</div>
|
||||
<ul v-else>
|
||||
<el-scrollbar max-height="366px">
|
||||
<el-scrollbar max-height="30rem">
|
||||
<li v-for="item in result" :key="item.path" @click="to(item)">
|
||||
<el-icon>
|
||||
<component :is="item.icon || 'el-icon-menu'" />
|
||||
@ -147,12 +147,12 @@ export default {
|
||||
<style scoped>
|
||||
.sc-search-no-result {
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
margin: 3rem 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sc-search-history {
|
||||
margin-top: 10px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.sc-search-history .el-tag {
|
||||
@ -164,21 +164,21 @@ export default {
|
||||
}
|
||||
|
||||
.sc-search-result li {
|
||||
height: 56px;
|
||||
height: 4rem;
|
||||
padding: 0 1rem;
|
||||
background: var(--el-bg-color-overlay);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
list-style: none;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
border-radius: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 1.1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sc-search-result li i {
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
:default-active="$route.meta.active || $route.fullPath"
|
||||
@select="select"
|
||||
active-text-color="#409EFF"
|
||||
background-color="#212d3d"
|
||||
background-color="#424c50"
|
||||
router
|
||||
text-color="#fff">
|
||||
<NavMenu :navMenus="menu"></NavMenu>
|
||||
@ -132,13 +132,13 @@ export default {
|
||||
<style scoped>
|
||||
.mobile-nav-button {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 10;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
background: #409eff;
|
||||
box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 1);
|
||||
box-shadow: 0 0.2rem 1rem 0 rgba(64, 158, 255, 1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -147,11 +147,11 @@ export default {
|
||||
|
||||
.mobile-nav-button i {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
background: #212d3d;
|
||||
background: #424c50;
|
||||
}
|
||||
|
||||
.mobile-nav .el-header {
|
||||
@ -167,16 +167,12 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-nav .logo-bar img {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mobile-nav .el-submenu__title:hover {
|
||||
background: #fff !important;
|
||||
width: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -287,19 +287,19 @@ export default {
|
||||
<style>
|
||||
.contextmenu {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
width: 15rem;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background: var(--el-bg-color-overlay);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 3000;
|
||||
list-style-type: none;
|
||||
padding: 10px 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.contextmenu hr {
|
||||
margin: 5px 0;
|
||||
margin: 0.4rem 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
font-size: 0;
|
||||
@ -311,14 +311,14 @@ export default {
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
padding: 0 17px;
|
||||
line-height: 2.5rem;
|
||||
padding: 0 1.3rem;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.contextmenu li i {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
font-size: 1.1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.contextmenu li:hover {
|
||||
@ -332,14 +332,6 @@ export default {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tags-tip {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tags-tip p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dark .contextmenu li {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
@ -50,8 +50,8 @@ export default {
|
||||
}
|
||||
|
||||
.el-breadcrumb .el-breadcrumb__inner .icon {
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
font-size: 1.1rem;
|
||||
margin-right: 0.4rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
transform: translateX(1.5rem);
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
|
||||
@ -181,7 +181,7 @@ export default {
|
||||
}
|
||||
|
||||
.user-bar .panel-item {
|
||||
padding: 0 10px;
|
||||
padding: 0 0.5rem;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -189,7 +189,7 @@ export default {
|
||||
}
|
||||
|
||||
.user-bar .panel-item i {
|
||||
font-size: 16px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.user-bar .panel-item:hover {
|
||||
@ -197,15 +197,15 @@ export default {
|
||||
}
|
||||
|
||||
.user-bar .user-avatar {
|
||||
height: 49px;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-bar .user-avatar label {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
margin-left: 0.4rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -6,9 +6,9 @@
|
||||
<div class="router-err__content">
|
||||
<h2>无权限或找不到页面</h2>
|
||||
<p>当前页面无权限访问或者打开了一个不存在的链接，请检查当前账户权限和链接的可访问性。</p>
|
||||
<el-button @click="gohome" plain round type="primary">返回首页</el-button>
|
||||
<el-button @click="gologin" plain round type="primary">重新登录</el-button>
|
||||
<el-button @click="goback" round type="primary">返回上一页</el-button>
|
||||
<el-button @click="goHome" plain round type="primary">返回首页</el-button>
|
||||
<el-button @click="goLogin" plain round type="primary">重新登录</el-button>
|
||||
<el-button @click="goBack" round type="primary">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,13 +16,13 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
gohome() {
|
||||
goHome() {
|
||||
location.href = '/'
|
||||
},
|
||||
goback() {
|
||||
goBack() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
gologin() {
|
||||
goLogin() {
|
||||
this.$router.push('/guest/login')
|
||||
},
|
||||
},
|
||||
@ -32,13 +32,13 @@ export default {
|
||||
<style scoped>
|
||||
.router-err {
|
||||
display: flex;
|
||||
width: 900px;
|
||||
margin: 50px auto;
|
||||
width: 70rem;
|
||||
margin: 4rem auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.router-err__icon {
|
||||
width: 400px;
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
.router-err__icon img {
|
||||
@ -47,30 +47,30 @@ export default {
|
||||
|
||||
.router-err__content {
|
||||
flex: 1;
|
||||
padding: 40px;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.router-err__content h2 {
|
||||
font-size: 26px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.router-err__content p {
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
color: #999;
|
||||
margin: 1rem 0 30px 0;
|
||||
margin: 1rem 0 2.5rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
@media (max-width: 77rem) {
|
||||
.router-err {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.router-err__icon {
|
||||
width: 280px;
|
||||
width: 22rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,8 @@ html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f6f8f9;
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
font-size: var(--el-font-size-base);
|
||||
font-family: 'Lucida Console', 'Microsoft YaHei', 'monospace';
|
||||
}
|
||||
|
||||
a {
|
||||
@ -63,8 +63,8 @@ textarea {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@ -86,10 +86,10 @@ textarea {
|
||||
/*布局设置*/
|
||||
.layout-setting {
|
||||
position: fixed;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
bottom: 100px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 0.3rem 0 0 0.3rem;
|
||||
bottom: 10rem;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: #409eff;
|
||||
@ -101,13 +101,13 @@ textarea {
|
||||
}
|
||||
|
||||
.layout-setting i {
|
||||
font-size: 18px;
|
||||
font-size: 1.3rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.adminui-header {
|
||||
height: 58px;
|
||||
height: 4rem;
|
||||
background: #424c50;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
@ -117,7 +117,7 @@ textarea {
|
||||
.adminui-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.adminui-header-right {
|
||||
@ -126,28 +126,28 @@ textarea {
|
||||
}
|
||||
|
||||
.adminui-header .logo-bar {
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adminui-header .logo-bar .logo {
|
||||
margin-right: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-right: 1rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.adminui-header .nav {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-left: 40px;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.adminui-header .nav li {
|
||||
padding: 0 10px;
|
||||
margin: 0 10px 0 0;
|
||||
font-size: 14px;
|
||||
padding: 0 1rem;
|
||||
margin: 0 1rem 0 0;
|
||||
font-size: 1.1rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
list-style: none;
|
||||
height: 100%;
|
||||
@ -157,7 +157,7 @@ textarea {
|
||||
}
|
||||
|
||||
.adminui-header .nav li i {
|
||||
margin-right: 5px;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.adminui-header .nav li:hover {
|
||||
@ -179,7 +179,7 @@ textarea {
|
||||
|
||||
/* 左侧菜单 */
|
||||
.aminui-side-split {
|
||||
width: 65px;
|
||||
width: 5rem;
|
||||
flex-shrink: 0;
|
||||
background: #424c50;
|
||||
display: flex;
|
||||
@ -187,7 +187,7 @@ textarea {
|
||||
}
|
||||
|
||||
.aminui-side-split-top {
|
||||
height: 49px;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.aminui-side-split-top a {
|
||||
@ -199,7 +199,7 @@ textarea {
|
||||
}
|
||||
|
||||
.aminui-side-split-top .logo {
|
||||
height: 30px;
|
||||
height: 3rem;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
@ -212,8 +212,8 @@ textarea {
|
||||
|
||||
.aminui-side-split li {
|
||||
cursor: pointer;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
@ -223,11 +223,11 @@ textarea {
|
||||
}
|
||||
|
||||
.aminui-side-split li i {
|
||||
font-size: 18px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.aminui-side-split li p {
|
||||
margin-top: 5px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.aminui-side-split li:hover {
|
||||
@ -240,7 +240,7 @@ textarea {
|
||||
|
||||
.adminui-side-split-scroll::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 5px;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.adminui-side-split-scroll::-webkit-scrollbar-thumb:hover {
|
||||
@ -259,22 +259,21 @@ textarea {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-shrink: 0;
|
||||
width: 210px;
|
||||
width: 15rem;
|
||||
background: #fff;
|
||||
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
||||
border-right: 1px solid #e6e6e6;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.adminui-side-top {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
.adminui-side-top h2 {
|
||||
padding: 0 20px;
|
||||
font-size: 17px;
|
||||
padding: 0 var(--el-menu-base-level-padding);
|
||||
font-size: 1.3rem;
|
||||
color: #3c4a54;
|
||||
}
|
||||
|
||||
@ -286,7 +285,7 @@ textarea {
|
||||
|
||||
.adminui-side-bottom {
|
||||
border-top: 1px solid #ebeef5;
|
||||
height: 51px;
|
||||
height: 4rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -294,7 +293,7 @@ textarea {
|
||||
}
|
||||
|
||||
.adminui-side-bottom i {
|
||||
font-size: 16px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.adminui-side-bottom:hover {
|
||||
@ -302,23 +301,19 @@ textarea {
|
||||
}
|
||||
|
||||
.aminui-side.isCollapse {
|
||||
width: 65px;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.el-menu .menu-tag {
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
height: 1.4rem;
|
||||
line-height: 1.4rem;
|
||||
background: var(--el-color-danger);
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
right: 20px;
|
||||
border-radius: 18px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.el-menu .el-sub-menu__title .menu-tag {
|
||||
right: 40px;
|
||||
right: 1rem;
|
||||
border-radius: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.el-menu--horizontal > li .menu-tag {
|
||||
@ -333,10 +328,9 @@ textarea {
|
||||
}
|
||||
|
||||
.adminui-topbar {
|
||||
height: 50px;
|
||||
height: 3rem;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -358,7 +352,7 @@ textarea {
|
||||
}
|
||||
|
||||
.adminui-tags {
|
||||
height: 35px;
|
||||
height: 3rem;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
@ -371,8 +365,8 @@ textarea {
|
||||
.adminui-tags li {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
height: calc(3rem - 1px);
|
||||
line-height: calc(3rem - 1px);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -387,7 +381,7 @@ textarea {
|
||||
}
|
||||
|
||||
.adminui-tags li a {
|
||||
padding: 0 10px;
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #999;
|
||||
@ -397,10 +391,10 @@ textarea {
|
||||
}
|
||||
|
||||
.adminui-tags li i {
|
||||
margin-left: 10px;
|
||||
border-radius: 3px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -452,20 +446,20 @@ textarea {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
top: -20px;
|
||||
top: -1.5rem;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
margin-left: -1.5rem;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-maximize-exit i {
|
||||
font-size: 14px;
|
||||
margin-top: 22px;
|
||||
font-size: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -475,7 +469,7 @@ textarea {
|
||||
|
||||
/*定宽页面*/
|
||||
.sc-page {
|
||||
width: 1230px;
|
||||
width: 100rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ html.dark {
|
||||
.adminui-header {
|
||||
background: var(--el-bg-color-overlay);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
height: 59px;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.aminui-side-split {
|
||||
|
||||
@ -22,6 +22,15 @@
|
||||
--el-color-primary-dark-9: #060f19;
|
||||
--el-font-size-base: 13px;
|
||||
--el-disabled-bg-color: --el-bg-color;
|
||||
--el-menu-horizontal-height: 4rem;
|
||||
}
|
||||
|
||||
.el-form-item--default {
|
||||
--font-size: 1rem;
|
||||
}
|
||||
|
||||
.el-upload--picture-card {
|
||||
--el-upload-picture-card-size: 10rem;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
@ -37,6 +46,10 @@
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
--el-card-padding: 1rem;
|
||||
}
|
||||
|
||||
.el-menu .el-menu-item a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@ -49,7 +62,7 @@
|
||||
}
|
||||
|
||||
.el-form-item-msg {
|
||||
font-size: 12px;
|
||||
font-size: 1rem;
|
||||
color: #999;
|
||||
flex-grow: 1;
|
||||
line-height: 2rem;
|
||||
@ -71,7 +84,7 @@
|
||||
.el-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding: 13px 1rem;
|
||||
padding: 1rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -87,15 +100,10 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-header .right-panel > * + * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-footer {
|
||||
background: #fff;
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
padding: 1rem;
|
||||
height: 51px;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
@ -112,69 +120,41 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-popconfirm__main {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
border-bottom: 0;
|
||||
font-size: 17px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
padding: 1rem 20px 0 20px;
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 17px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-drawer__header > :first-child {
|
||||
font-size: 17px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-tree.menu .el-tree-node__content {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.el-tree.menu .el-tree-node__content .el-tree-node__label .icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.el-progress__text {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.el-progress__text i {
|
||||
font-size: 14.4px !important;
|
||||
}
|
||||
|
||||
.el-step.is-horizontal .el-step__line {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.el-step__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.drawerBG {
|
||||
background: #f6f8f9;
|
||||
}
|
||||
|
||||
.el-button + .el-dropdown {
|
||||
margin-left: 10px;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
|
||||
.el-button-group + .el-dropdown {
|
||||
margin-left: 10px;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
|
||||
.el-button-group + .el-button-group {
|
||||
margin-left: 10px;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
@ -226,31 +206,31 @@
|
||||
}
|
||||
|
||||
.el-table.el-table--large {
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.el-table.el-table--small {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.el-radio-button__inner {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.el-checkbox-button__inner {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.el-sub-menu .el-icon {
|
||||
font-size: 17px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.el-sub-menu .el-sub-menu__icon-arrow {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.aminui-side-split li.active {
|
||||
@ -296,4 +276,12 @@ body .tox-tinymce-aux {
|
||||
.el-dialog__body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table thead.is-group th.el-table__cell {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.el-descriptions__body .el-descriptions__table .el-descriptions__cell {
|
||||
font-size: inherit;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@media (max-width: 992px) {
|
||||
@media (max-width: 77rem) {
|
||||
// 移动端样式覆盖
|
||||
.el-form-item {
|
||||
display: block;
|
||||
@ -6,7 +6,7 @@
|
||||
.el-form-item__label {
|
||||
display: block;
|
||||
text-align: left;
|
||||
padding: 0 0 10px;
|
||||
padding: 0 0 1rem;
|
||||
}
|
||||
.el-dialog {
|
||||
width: 90% !important;
|
||||
@ -44,7 +44,7 @@
|
||||
}
|
||||
|
||||
.scTable-page {
|
||||
padding: 0 5px !important;
|
||||
padding: 0 0.4rem !important;
|
||||
}
|
||||
|
||||
.el-pagination__total,
|
||||
@ -136,4 +136,8 @@
|
||||
.common-header-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-bar .user-avatar label {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@ -32,61 +32,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*static-table*/
|
||||
.static-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.static-table th {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
color: #909399;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
padding: 1rem;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.static-table td {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
padding: 1rem;
|
||||
max-width: 250px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/*header-tabs*/
|
||||
.header-tabs {
|
||||
padding: 10px 0 0 0;
|
||||
display: block;
|
||||
border: 0 !important;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.header-tabs .el-tabs__header {
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-tabs .el-tabs__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-tabs .el-tabs__nav {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.header-tabs .el-tabs__item {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-tabs .el-tabs__item.is-active {
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
}
|
||||
|
||||
/*common-page*/
|
||||
.common-page {
|
||||
}
|
||||
@ -102,17 +47,17 @@
|
||||
}
|
||||
|
||||
.common-header-logo img {
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
height: 3rem;
|
||||
margin-right: 1rem;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.common-header-logo label {
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.common-header-title {
|
||||
font-size: 16px;
|
||||
font-size: 1.3rem;
|
||||
border-left: 1px solid var(--el-border-color-light);
|
||||
margin-left: 1rem;
|
||||
padding-left: 1rem;
|
||||
@ -124,7 +69,7 @@
|
||||
}
|
||||
|
||||
.common-header-right a {
|
||||
font-size: 14px;
|
||||
font-size: 1.3rem;
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -134,17 +79,17 @@
|
||||
}
|
||||
|
||||
.common-container {
|
||||
max-width: 1240px;
|
||||
margin: 30px auto 30px auto;
|
||||
max-width: 100rem;
|
||||
margin: 3rem auto 3rem auto;
|
||||
}
|
||||
|
||||
.common-main {
|
||||
padding: 20px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.common-title {
|
||||
font-size: 26px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@ -154,22 +99,13 @@
|
||||
}
|
||||
|
||||
.common-main .el-steps .el-step__title {
|
||||
font-size: 14px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.common-main .el-steps .el-step__icon {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.common-main .yzm {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.common-main .yzm .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.common-main .link {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
|
||||
@ -29,6 +29,7 @@ export function judementSameArr(news, old) {
|
||||
}
|
||||
|
||||
export function rolePermission(data, user) {
|
||||
if (permissionAll(data)) return true
|
||||
if (!user || !user.roles) {
|
||||
return false
|
||||
}
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="6" :md="8" :sm="12" :xl="6" :xs="24">
|
||||
<el-card :body-style="{ padding: '0px' }" shadow="hover">
|
||||
<el-card :body-style="{ padding: '0' }" shadow="hover">
|
||||
<div class="code-item">
|
||||
<div :style="{ background: 'blue' }" class="img">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, blue 100px)`">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, blue 10rem)`">
|
||||
<component :is="`sc-icon-js`" />
|
||||
</el-icon>
|
||||
</div>
|
||||
@ -20,10 +20,10 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6" :md="8" :sm="12" :xl="6" :xs="24">
|
||||
<el-card :body-style="{ padding: '0px' }" shadow="hover">
|
||||
<el-card :body-style="{ padding: '0' }" shadow="hover">
|
||||
<div class="code-item">
|
||||
<div :style="{ background: 'orange' }" class="img">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, blue 100px)`">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, blue 10rem)`">
|
||||
<component :is="`sc-icon-csharp`" />
|
||||
</el-icon>
|
||||
</div>
|
||||
@ -46,10 +46,10 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6" :md="8" :sm="12" :xl="6" :xs="24">
|
||||
<el-card :body-style="{ padding: '0px' }" shadow="hover">
|
||||
<el-card :body-style="{ padding: '0' }" shadow="hover">
|
||||
<div class="code-item">
|
||||
<div :style="{ background: 'green' }" class="img">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, green 100px)`">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, green 10rem)`">
|
||||
<component :is="`el-icon-picture`" />
|
||||
</el-icon>
|
||||
</div>
|
||||
@ -76,10 +76,10 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6" :md="8" :sm="12" :xl="6" :xs="24">
|
||||
<el-card :body-style="{ padding: '0px' }" shadow="hover">
|
||||
<el-card :body-style="{ padding: '0' }" shadow="hover">
|
||||
<div class="code-item">
|
||||
<div :style="{ background: 'gray' }" class="img">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, green 100px)`">
|
||||
<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, green 10rem)`">
|
||||
<component :is="`el-icon-picture`" />
|
||||
</el-icon>
|
||||
</div>
|
||||
@ -169,7 +169,7 @@ export default {
|
||||
|
||||
.code-item .img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 10rem;
|
||||
background: #09f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -177,9 +177,9 @@ export default {
|
||||
}
|
||||
|
||||
.code-item .img i {
|
||||
font-size: 100px;
|
||||
font-size: 7.7rem;
|
||||
color: #fff;
|
||||
background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);
|
||||
background-image: -webkit-linear-gradient(top left, #fff, #09f 10rem);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
@ -189,14 +189,14 @@ export default {
|
||||
}
|
||||
|
||||
.code-item .title h2 {
|
||||
font-size: 16px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.code-item .title h4 {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.code-item .title p {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="form.password" :placeholder="$t('请输入密码')" clearable prefix-icon="el-icon-lock" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-bottom: 10px">
|
||||
<el-form-item style="margin-bottom: 1rem">
|
||||
<el-col :span="12">
|
||||
<el-checkbox v-model="autoLogin" :label="$t('24小时免登录')"></el-checkbox>
|
||||
</el-col>
|
||||
|
||||
@ -46,24 +46,9 @@
|
||||
<phone-form></phone-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template v-if="$CONFIG.MY_SHOW_LOGIN_OAUTH">
|
||||
<el-divider>{{ $t('其他登录方式') }}</el-divider>
|
||||
<div class="login-oauth">
|
||||
<el-button @click="wechatLogin" circle icon="sc-icon-wechat" type="success"></el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="showWechatLogin" :title="$t('二维码登录')" :width="400" destroy-on-close>
|
||||
<div class="qrCodeLogin">
|
||||
<sc-qr-code :size="200" :text="WechatLoginCode" class="qrCode"></sc-qr-code>
|
||||
<p class="msg">{{ $t('请使用微信扫一扫登录') }}<br />{{ $t('模拟3秒后自动扫描') }}</p>
|
||||
<div v-if="isWechatLoginResult" class="qrCodeLogin-result">
|
||||
<el-result :sub-title="$t('请在设备中点击授权登录')" :title="$t('已扫描')" icon="success"></el-result>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -97,9 +82,6 @@ export default {
|
||||
value: 'en',
|
||||
},
|
||||
],
|
||||
WechatLoginCode: '',
|
||||
showWechatLogin: false,
|
||||
isWechatLoginResult: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -135,14 +117,6 @@ export default {
|
||||
configLang(command) {
|
||||
this.config.lang = command.value
|
||||
},
|
||||
wechatLogin() {
|
||||
this.showWechatLogin = true
|
||||
this.WechatLoginCode = 'NetAdmin-823677237287236-' + new Date().getTime()
|
||||
this.isWechatLoginResult = false
|
||||
setTimeout(() => {
|
||||
this.isWechatLoginResult = true
|
||||
}, 3000)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -155,82 +129,6 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.login_adv {
|
||||
width: 33.33333%;
|
||||
background-color: #555;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login_adv__title {
|
||||
color: #fff;
|
||||
padding: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.login_adv__title h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.login_adv__title h4 {
|
||||
font-size: 18px;
|
||||
margin-top: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.login_adv__title p {
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
line-height: 1.8;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.login_adv__title div {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login_adv__title div span {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.login_adv__title div i {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.login_adv__title div i.add {
|
||||
font-size: 20px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.login_adv__bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
padding: 40px;
|
||||
background-image: linear-gradient(transparent, #000);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.login_adv__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.login_main {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
@ -238,13 +136,12 @@ export default {
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
width: 30rem;
|
||||
margin: auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.login-header .logo {
|
||||
@ -253,34 +150,17 @@ export default {
|
||||
}
|
||||
|
||||
.login-header .logo img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.login-header .logo label {
|
||||
font-size: 26px;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-oauth {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.login-form .el-divider {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.login-form:deep(.el-tabs) .el-tabs__header {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-form:deep(.login-forgot) {
|
||||
text-align: right;
|
||||
}
|
||||
@ -294,7 +174,7 @@ export default {
|
||||
}
|
||||
|
||||
.login-form:deep(.login-reg) {
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
@ -308,60 +188,24 @@ export default {
|
||||
|
||||
.login_config {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
.qrCodeLogin {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.qrCodeLogin img.qrCode {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.qrCodeLogin p.msg {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.qrCodeLogin .qrCodeLogin-result {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
background: var(--el-mask-color);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.login-form {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
@media (max-width: 77rem) {
|
||||
.login_main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login_main .login_config {
|
||||
position: static;
|
||||
padding: 20px 20px 0 20px;
|
||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.login_adv {
|
||||
display: none;
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +1,8 @@
|
||||
<template>
|
||||
<div v-if="pageLoading">
|
||||
<el-main>
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :rows="1"></el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="never" style="margin-top: 1rem">
|
||||
<el-skeleton></el-skeleton>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</div>
|
||||
<widgets v-if="dashboard" @on-mounted="onMounted"></widgets>
|
||||
<work v-else @on-mounted="onMounted"></work>
|
||||
<el-main>
|
||||
<widgets v-if="dashboard" @on-mounted="onMounted"></widgets>
|
||||
<work v-else @on-mounted="onMounted"></work>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<el-card :header="$t('关于项目')" class="item-background" shadow="hover">
|
||||
<p>高性能 / 精致 / 优雅。基于Vue3 + Element-Plus 的中后台前端解决方案，如果喜欢就点个星星支持一下。</p>
|
||||
<p>
|
||||
<a href="https://gitee.com/lolicode/scui" target="_blank">
|
||||
<img alt="star" src="https://gitee.com/lolicode/scui/badge/star.svg?theme=dark" style="vertical-align: middle" />
|
||||
</a>
|
||||
</p>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: '关于项目',
|
||||
icon: 'el-icon-setting',
|
||||
description: '点个星星支持一下',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item-background p {
|
||||
color: #999;
|
||||
margin-top: 10px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<el-card header="changelog" shadow="never">
|
||||
<el-skeleton :loading="loading" :rows="10" animated>
|
||||
<template #default>
|
||||
<div v-html="changeLog" class="change-log"></div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import markdownit from 'markdown-it'
|
||||
import { full as emoji } from 'markdown-it-emoji'
|
||||
|
||||
export default {
|
||||
title: '更新日志',
|
||||
icon: 'el-icon-monitor',
|
||||
description: '当前项目更新日志',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
changeLog: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getChangeLog()
|
||||
},
|
||||
methods: {
|
||||
async getChangeLog() {
|
||||
const res = await this.$API.sys_tools.getChangeLog.post()
|
||||
this.changeLog = markdownit().use(emoji).render(res.data)
|
||||
this.loading = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss">
|
||||
.change-log {
|
||||
line-height: 3rem;
|
||||
li {
|
||||
margin: 0 0 0 2rem;
|
||||
}
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<el-card header="dependencies" shadow="never">
|
||||
<el-skeleton :loading="loading" :rows="5" animated>
|
||||
<template #default>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item v-for="(value, key) in packageJson.dependencies" :key="key" :label="key">{{ value }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card header="devDependencies" shadow="never">
|
||||
<el-skeleton :loading="loading" :rows="5" animated>
|
||||
<template #default>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item v-for="(value, key) in packageJson.devDependencies" :key="key" :label="key">{{
|
||||
value
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card header="assemblies" shadow="never">
|
||||
<el-skeleton :loading="loading" :rows="5" animated>
|
||||
<template #default>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item v-for="(value, key) in modules" :key="key" :label="value.name">{{ value.version }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import packageJson from '/package.json'
|
||||
|
||||
export default {
|
||||
title: '模块信息',
|
||||
icon: 'el-icon-monitor',
|
||||
description: '当前项目模块信息',
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
packageJson,
|
||||
modules: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getModules()
|
||||
},
|
||||
methods: {
|
||||
async getModules() {
|
||||
const res = await this.$API.sys_tools.getModules.post()
|
||||
this.modules = res.data
|
||||
this.loading = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup></script>
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<el-card :header="$t('进度环')" shadow="hover">
|
||||
<div class="progress">
|
||||
<el-progress :percentage="85.5" :width="160" type="dashboard">
|
||||
<template #default="{ percentage }">
|
||||
<div class="percentage-value">{{ percentage }}%</div>
|
||||
<div class="percentage-label">当前进度</div>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: '进度环',
|
||||
icon: 'el-icon-odometer',
|
||||
description: '进度环原子组件演示',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.progress {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress .percentage-value {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.progress .percentage-label {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -35,17 +35,17 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.item-background {
|
||||
background: linear-gradient(to right, #8e54e9, #4776e6);
|
||||
background: linear-gradient(to right, rgb(66, 76, 80), #ccc);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.time h2 {
|
||||
font-size: 40px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.time p {
|
||||
font-size: 14px;
|
||||
margin-top: 13px;
|
||||
font-size: 1.1rem;
|
||||
margin-top: 1rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
@ -1,38 +1,15 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row>
|
||||
<el-col :lg="24">
|
||||
<el-card class="aboutTop" shadow="never">
|
||||
<div class="aboutTop-info">
|
||||
<img alt="" src="@/assets/img/logo.png" />
|
||||
<h2>{{ packageJson.name }}</h2>
|
||||
<p>{{ ver }}</p>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card header="dependencies" shadow="never">
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item v-for="(value, key) in packageJson.dependencies" :key="key" :label="key">{{
|
||||
value
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-card header="devDependencies" shadow="never">
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item v-for="(value, key) in packageJson.devDependencies" :key="key" :label="key">{{
|
||||
value
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-card header="Assemblies" shadow="never">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item v-for="(value, key) in modules" :key="key" :label="value.name">{{
|
||||
value.version
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
<el-card :class="loading ? '' : 'aboutTop'" shadow="never">
|
||||
<el-skeleton :loading="loading" :rows="5" animated>
|
||||
<template #default>
|
||||
<div class="aboutTop-info">
|
||||
<img alt="" src="@/assets/img/logo.png" />
|
||||
<h2>{{ packageJson.name }}</h2>
|
||||
<p>{{ ver }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -44,23 +21,19 @@ export default {
|
||||
description: '当前项目版本信息',
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
packageJson,
|
||||
ver: '',
|
||||
modules: [],
|
||||
ver: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getVer()
|
||||
this.getModules()
|
||||
},
|
||||
methods: {
|
||||
async getVer() {
|
||||
const res = await this.$API.sys_tools.getVersion.post()
|
||||
this.ver = res.data
|
||||
},
|
||||
async getModules() {
|
||||
const res = await this.$API.sys_tools.getModules.post()
|
||||
this.modules = res.data
|
||||
this.loading = false
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,111 +0,0 @@
|
||||
<template>
|
||||
<el-card :header="$t('欢迎')" shadow="hover">
|
||||
<div class="welcome">
|
||||
<div class="logo">
|
||||
<img src="@/assets/img/logo.png" />
|
||||
<h2>欢迎体验 NetAdmin</h2>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<div class="tips-item">
|
||||
<div class="tips-item-icon">
|
||||
<el-icon>
|
||||
<el-icon-menu />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="tips-item-message">这里是项目控制台，你可以点击右上方的“自定义”按钮来添加移除或者移动部件。</div>
|
||||
</div>
|
||||
<div class="tips-item">
|
||||
<div class="tips-item-icon">
|
||||
<el-icon>
|
||||
<el-icon-promotion />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
|
||||
</div>
|
||||
<div class="tips-item">
|
||||
<div class="tips-item-icon">
|
||||
<el-icon>
|
||||
<el-icon-milk-tea />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="tips-item-message">项目目的：让前端工作更快乐</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button @click="godoc" icon="el-icon-check" size="large" type="primary">文档</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: '欢迎',
|
||||
icon: 'el-icon-present',
|
||||
description: '项目特色以及文档链接',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
godoc() {
|
||||
window.open('https://lolicode.gitee.io/scui-doc/')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.welcome .logo {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome .logo img {
|
||||
vertical-align: bottom;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.welcome .logo h2 {
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 20px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 7.5px 0;
|
||||
}
|
||||
|
||||
.tips-item-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
margin-right: 20px;
|
||||
color: var(--el-color-primary);
|
||||
background: rgba(180, 180, 180, 0.1);
|
||||
}
|
||||
|
||||
.tips-item-message {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: center;
|
||||
margin: 40px 0 20px 0;
|
||||
}
|
||||
</style>
|
||||
@ -71,6 +71,16 @@
|
||||
<el-col :span="6"><span></span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: grid.layout.join(',') === '24,12,12' }"
|
||||
@click="setLayout([24, 12, 12])"
|
||||
class="selectLayout-item item02">
|
||||
<el-row :gutter="2">
|
||||
<el-col :span="24"><span></span></el-col>
|
||||
<el-col :span="12"><span></span></el-col>
|
||||
<el-col :span="12"><span></span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: grid.layout.join(',') === '24,16,8' }"
|
||||
@click="setLayout([24, 16, 8])"
|
||||
@ -111,7 +121,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-footer style="height: 51px">
|
||||
<el-footer>
|
||||
<el-button @click="backDefault()" size="small">恢复默认</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
@ -141,7 +151,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.grid = this.$TOOL.data.get('grid') || JSON.parse(JSON.stringify(this.defaultGrid))
|
||||
this.loadGrid()
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('on-mounted')
|
||||
@ -228,6 +238,10 @@ export default {
|
||||
close() {
|
||||
this.customizing = false
|
||||
this.$refs.widgets.style.removeProperty('transform')
|
||||
this.loadGrid()
|
||||
},
|
||||
loadGrid() {
|
||||
this.grid = this.$TOOL.data.get('grid') || JSON.parse(JSON.stringify(this.defaultGrid))
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -248,33 +262,32 @@ export default {
|
||||
}
|
||||
|
||||
.widgets-aside {
|
||||
width: 360px;
|
||||
width: 25rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.widgets-aside-title {
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.widgets-aside-title i {
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
margin-right: 0.8rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.widgets-aside-close {
|
||||
font-size: 18px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 1.4rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
border-radius: 0.3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -290,7 +303,7 @@ export default {
|
||||
}
|
||||
|
||||
.widgets-top-title {
|
||||
font-size: 18px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -304,7 +317,7 @@ export default {
|
||||
}
|
||||
|
||||
.customizing .widgets-wrapper {
|
||||
margin-right: -360px;
|
||||
margin-right: -25rem;
|
||||
}
|
||||
|
||||
.customizing .widgets-wrapper .el-col {
|
||||
@ -343,10 +356,10 @@ export default {
|
||||
.customize-overlay label {
|
||||
background: var(--el-color-primary);
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
padding: 0 30px;
|
||||
border-radius: 40px;
|
||||
font-size: 18px;
|
||||
height: 4rem;
|
||||
padding: 0 3rem;
|
||||
border-radius: 3rem;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -355,7 +368,7 @@ export default {
|
||||
|
||||
.customize-overlay label i {
|
||||
margin-right: 1rem;
|
||||
font-size: 24px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.customize-overlay .close {
|
||||
@ -377,14 +390,14 @@ export default {
|
||||
}
|
||||
|
||||
.widgets-list-item .item-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(180, 180, 180, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-size: 1.4rem;
|
||||
margin-right: 1rem;
|
||||
color: #6a8bad;
|
||||
}
|
||||
@ -394,13 +407,13 @@ export default {
|
||||
}
|
||||
|
||||
.widgets-list-item .item-info h2 {
|
||||
font-size: 16px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: normal;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.widgets-list-item .item-info p {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
}
|
||||
@ -419,10 +432,10 @@ export default {
|
||||
}
|
||||
|
||||
.selectLayout-item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 2px solid var(--el-border-color-light);
|
||||
padding: 5px;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: 0.2rem solid var(--el-border-color-light);
|
||||
padding: 0.4rem;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@ -430,21 +443,21 @@ export default {
|
||||
.selectLayout-item span {
|
||||
display: block;
|
||||
background: var(--el-border-color-light);
|
||||
height: 46px;
|
||||
height: 3.6rem;
|
||||
}
|
||||
|
||||
.selectLayout-item.item02 span {
|
||||
height: 30px;
|
||||
height: 2.4rem;
|
||||
}
|
||||
|
||||
.selectLayout-item.item02 .el-col:nth-child(1) span {
|
||||
height: 14px;
|
||||
margin-bottom: 2px;
|
||||
height: 1.1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.selectLayout-item.item03 span {
|
||||
height: 14px;
|
||||
margin-bottom: 2px;
|
||||
height: 1.1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.selectLayout-item:hover {
|
||||
@ -469,7 +482,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
@media (max-width: 77rem) {
|
||||
.customizing .widgets {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
|
||||
@ -123,17 +123,17 @@ export default {
|
||||
<style scoped>
|
||||
.myMods {
|
||||
list-style: none;
|
||||
margin: -10px;
|
||||
margin: -0.8rem;
|
||||
}
|
||||
|
||||
.myMods li {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
vertical-align: top;
|
||||
transition: all 0.3s ease;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
margin: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.myMods li:hover {
|
||||
@ -143,7 +143,6 @@ export default {
|
||||
.myMods li a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -153,14 +152,14 @@ export default {
|
||||
}
|
||||
|
||||
.myMods li i {
|
||||
font-size: 26px;
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.myMods li p {
|
||||
font-size: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -173,7 +172,7 @@ export default {
|
||||
}
|
||||
|
||||
.modItem-add i {
|
||||
font-size: 30px;
|
||||
font-size: 2.3rem;
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
@ -184,39 +183,39 @@ export default {
|
||||
}
|
||||
|
||||
.setMods {
|
||||
padding: 0 20px;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.setMods h4 {
|
||||
font-size: 14px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.setMods ul {
|
||||
margin: 20px -5px;
|
||||
min-height: 90px;
|
||||
margin: 1.5rem -0.4rem;
|
||||
min-height: 7rem;
|
||||
}
|
||||
|
||||
.setMods li {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
margin: 0.4rem;
|
||||
color: #fff;
|
||||
vertical-align: top;
|
||||
padding: 1rem 4px 4px;
|
||||
padding: 1rem 0.3rem 0.3rem;
|
||||
cursor: move;
|
||||
border-radius: 3px;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.setMods li i {
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.setMods li p {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.setMods li.sortable-ghost {
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="24">
|
||||
<el-card :header="$t('我的常用')" shadow="never">
|
||||
<myapp></myapp>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
<el-card :header="$t('我的常用')" shadow="never">
|
||||
<myapp></myapp>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@media (max-width: 992px) {
|
||||
@media (max-width: 77rem) {
|
||||
.adminui-main > .el-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<el-card :header="$t('当前已用量')" shadow="never">
|
||||
<el-progress :color="color" :format="format" :percentage="value" :stroke-width="20" :text-inside="true" />
|
||||
<el-row :gutter="15" style="margin-top: 20px">
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic :title="$t('文档')" groupSeparator suffix="GB" value="7.41"></sc-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic :title="$t('图片')" groupSeparator suffix="GB" value="12.90"></sc-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic :title="$t('视音频')" groupSeparator suffix="MB" value="68.79"></sc-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic :title="$t('其他')" groupSeparator suffix="GB" value="17.58"></sc-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scStatistic from '@/components/scStatistic'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scStatistic,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 39.58,
|
||||
color: [
|
||||
{ color: '#67C23A', percentage: 40 },
|
||||
{ color: '#E6A23C', percentage: 60 },
|
||||
{ color: '#F56C6C', percentage: 80 },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
format(percentage) {
|
||||
return percentage + 'G'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -3,7 +3,7 @@
|
||||
<div v-loading="loading">
|
||||
<el-tabs v-if="!loading" tab-position="top">
|
||||
<el-tab-pane :label="$t('基本信息')">
|
||||
<el-form :disabled="mode === 'view'" :model="form" :rules="rules" label-width="100px" ref="dialogForm">
|
||||
<el-form :disabled="mode === 'view'" :model="form" :rules="rules" label-width="10rem" ref="dialogForm">
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="$t('用户注册设置')" name="1">
|
||||
<div style="margin: 1rem">
|
||||
@ -35,10 +35,10 @@
|
||||
<el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')">
|
||||
<json-viewer
|
||||
:expand-depth="5"
|
||||
:expanded="true"
|
||||
:theme="this.$TOOL.data.get('APP_DARK') ? 'dark' : 'light'"
|
||||
:value="form"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div v-loading="loading">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane :label="$t('基本信息')">
|
||||
<el-form :disabled="mode === 'view'" :model="form" :rules="rules" label-width="100px" ref="dialogForm">
|
||||
<el-form :disabled="mode === 'view'" :model="form" :rules="rules" label-width="10rem" ref="dialogForm">
|
||||
<el-form-item :label="$t('上级部门')" prop="parentId">
|
||||
<el-cascader
|
||||
v-model="form.parentId"
|
||||
@ -30,10 +30,10 @@
|
||||
<el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')">
|
||||
<json-viewer
|
||||
:expand-depth="5"
|
||||
:expanded="true"
|
||||
:theme="this.$TOOL.data.get('APP_DARK') ? 'dark' : 'light'"
|
||||
:value="form"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div v-loading="loading">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane :label="$t('基本信息')">
|
||||
<el-form :disabled="mode === 'view'" :model="form" :rules="rules" label-width="100px" ref="dialogForm">
|
||||
<el-form :disabled="mode === 'view'" :model="form" :rules="rules" label-width="10rem" ref="dialogForm">
|
||||
<el-form-item :label="$t('所属字典')" prop="catalogId">
|
||||
<na-dic-catalog v-model="form.catalogId" />
|
||||
</el-form-item>
|
||||
@ -18,10 +18,10 @@
|
||||
<el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')">
|
||||
<json-viewer
|
||||
:expand-depth="5"
|
||||
:expanded="true"
|
||||
:theme="this.$TOOL.data.get('APP_DARK') ? 'dark' : 'light'"
|
||||
:value="form"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<sc-dialog v-model="visible" :title="titleMap[mode]" :width="400" @closed="$emit('closed')" destroy-on-close>
|
||||
<el-form v-loading="loading" :model="form" :rules="rules" label-width="100px" ref="dialogForm">
|
||||
<el-form v-loading="loading" :model="form" :rules="rules" label-width="10rem" ref="dialogForm">
|
||||
<el-form-item :label="$t('字典名称')" prop="name">
|
||||
<el-input v-model="form.name" :placeholder="$t('字典显示名称')" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
@ -30,10 +30,10 @@
|
||||
<el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')">
|
||||
<json-viewer
|
||||
:expand-depth="5"
|
||||
:expanded="true"
|
||||
:theme="this.$TOOL.data.get('APP_DARK') ? 'dark' : 'light'"
|
||||
:value="form"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -80,10 +80,10 @@
|
||||
<el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')" :name="2">
|
||||
<json-viewer
|
||||
:expand-depth="5"
|
||||
:expanded="true"
|
||||
:theme="this.$TOOL.data.get('APP_DARK') ? 'dark' : 'light'"
|
||||
:value="form"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<template v-else>
|
||||
<el-col>
|
||||
<h2>{{ form.meta.title || '新增菜单' }}</h2>
|
||||
<el-form :model="form" :rules="rules" label-width="100px" ref="dialogForm">
|
||||
<el-form :model="form" :rules="rules" label-width="10rem" ref="dialogForm">
|
||||
<el-form-item :label="$t('显示名称')" prop="meta.title">
|
||||
<el-input v-model="form.meta.title" :placeholder="$t('菜单显示名字')" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
label-width="100px"
|
||||
label-width="10rem"
|
||||
ref="dialogForm">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane :label="$t('基本信息')">
|
||||
@ -53,10 +53,10 @@
|
||||
<el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')">
|
||||
<json-viewer
|
||||
:expand-depth="5"
|
||||
:expanded="true"
|
||||
:theme="this.$TOOL.data.get('APP_DARK') ? 'dark' : 'light'"
|
||||
:value="form"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div v-loading="loading">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane :label="$t('基本信息')">
|
||||
<el-form :disabled="mode === 'view'" :model="form" :rules="rules" label-width="100px" ref="dialogForm">
|
||||
<el-form :disabled="mode === 'view'" :model="form" :rules="rules" label-width="10rem" ref="dialogForm">
|
||||
<el-form-item :label="$t('角色名称')" prop="name">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('数据范围')">
|
||||
<el-form label-width="100px">
|
||||
<el-form label-width="10rem">
|
||||
<el-form-item :label="$t('规则类型')">
|
||||
<el-select v-model="form.dataScope" :disabled="mode === 'view'">
|
||||
<el-option v-for="(item, i) in this.$GLOBAL.enums.dataScopes" :key="i" :label="item[1]" :value="i"></el-option>
|
||||
@ -66,7 +66,7 @@
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('控制台')">
|
||||
<el-form label-width="100px">
|
||||
<el-form label-width="10rem">
|
||||
<el-form-item :label="$t('控制台视图')">
|
||||
<el-select v-model="form.displayDashboard" :disabled="mode === 'view'">
|
||||
<el-option :label="$t('仪表板')" :value="true"></el-option>
|
||||
@ -79,10 +79,10 @@
|
||||
<el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')">
|
||||
<json-viewer
|
||||
:expand-depth="5"
|
||||
:expanded="true"
|
||||
:theme="this.$TOOL.data.get('APP_DARK') ? 'dark' : 'light'"
|
||||
:value="form"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
label-width="100px"
|
||||
label-width="10rem"
|
||||
ref="dialogForm">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane :label="$t('基本信息')">
|
||||
|
||||
Reference in New Issue
Block a user