forked from github/dataease
fix: 筛选组件 国际化优化
This commit is contained in:
dataeaseShu
parent
9189bb1b70
commit
0ba75bb98c
@ -48,7 +48,7 @@ export default {
|
||||
padding-left: 3px;
|
||||
padding-right: 0px;
|
||||
cursor:pointer!important;
|
||||
background-color: #3370ff;
|
||||
background-color: var(--primary,#3370ff);
|
||||
}
|
||||
.bar-main i{
|
||||
color: white;
|
||||
|
||||
@ -372,7 +372,7 @@ export default {
|
||||
padding-left: 3px;
|
||||
padding-right: 0px;
|
||||
cursor:pointer!important;
|
||||
background-color: #3370ff;
|
||||
background-color: var(--primary,#3370ff);
|
||||
}
|
||||
.bar-main i{
|
||||
color: white;
|
||||
|
||||
@ -149,7 +149,7 @@ export default {
|
||||
padding-left: 3px!important;
|
||||
padding-right: 0px!important;
|
||||
cursor:pointer!important;
|
||||
background-color: #3370ff;
|
||||
background-color: var(--primary,#3370ff);
|
||||
}
|
||||
.bar-main i{
|
||||
color: white;
|
||||
|
||||
@ -76,7 +76,7 @@ export default {
|
||||
padding-right: 1px;
|
||||
cursor:pointer!important;
|
||||
text-align: center;
|
||||
background-color: #3370ff;
|
||||
background-color: var(--primary,#3370ff);
|
||||
}
|
||||
.bar-main i{
|
||||
color: white;
|
||||
|
||||
@ -2200,7 +2200,8 @@ export default {
|
||||
i18n_msg_type_dataset_sync_faild: 'Dataset synchronization failed',
|
||||
i18n_msg_type_all: 'All type',
|
||||
i18n_msg_type_ds_invalid: 'Datasource invalid',
|
||||
channel_inner_msg: 'On site news'
|
||||
channel_inner_msg: 'On site news',
|
||||
channel_email_msg: 'Mail notification'
|
||||
},
|
||||
denumberrange: {
|
||||
label: 'Number range',
|
||||
|
||||
@ -1148,6 +1148,9 @@ div:focus {
|
||||
.el-input__prefix {
|
||||
display: none;
|
||||
}
|
||||
.el-icon-circle-close {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-calendar-outlined {
|
||||
@ -1172,12 +1175,55 @@ div:focus {
|
||||
}
|
||||
}
|
||||
|
||||
.user-drawer,
|
||||
.user-drawer-task {
|
||||
.el-drawer__body-cont {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.el-drawer__header {
|
||||
padding: 16px 24px;
|
||||
margin: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 57px;
|
||||
mix-blend-mode: normal;
|
||||
border-bottom: 1px solid var(--deComBorderColor50, rgba(187, 191, 196, 0.5));
|
||||
|
||||
.el-drawer__close-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.el-drawer__close-btn:hover {
|
||||
background: #e9e9ea;
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 12px 24px 24px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
> :nth-child(1) {
|
||||
color: #1f2329;
|
||||
color: var(--deTextSecondary, #1f2329);
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
@ -1187,19 +1233,82 @@ div:focus {
|
||||
width: 116px;
|
||||
}
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
.item,
|
||||
.more {
|
||||
background: #f5f6f7;
|
||||
font-family: PingFang SC;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-right: 12px;
|
||||
text-align: center;
|
||||
padding: 1px 6px;
|
||||
background: var(--deTextPrimary5, #f5f6f7);
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.active,
|
||||
.more:hover {
|
||||
background: rgba(51, 112, 255, 0.1);
|
||||
color: #0c296e;
|
||||
.more:hover{
|
||||
background: var(--primary10, rgba(51, 112, 255, 0.1));
|
||||
color: var(--primaryselect, #0c296e);
|
||||
}
|
||||
.more {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border-radius: 4px;
|
||||
padding: 5px 26px 5px 26px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #1f2329;
|
||||
border: 1px solid #bbbfc4;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.foot {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
.user-popper {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tree-select {
|
||||
.el-select-dropdown__empty,
|
||||
.el-scrollbar__wrap,
|
||||
.popper__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-popper.dept {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -15,10 +15,9 @@
|
||||
<!--基础配置表单-->
|
||||
<el-form ref="formInline" v-loading="loading" :model="formInline" :rules="rules"
|
||||
class="demo-form-inline de-form-item" :disabled="show" label-width="80px" label-position="right" size="small">
|
||||
<el-form-item prop="frontTimeOut" class="de-i118">
|
||||
<el-form-item prop="frontTimeOut">
|
||||
<template slot="label">
|
||||
{{ $t('system_parameter_setting.request_timeout')}}
|
||||
<i class="is-require"></i>
|
||||
<el-tooltip class="item" effect="dark" :content="$t('system_parameter_setting.front_time_out')"
|
||||
placement="top">
|
||||
<i class="el-icon-warning-outline tips"></i>
|
||||
@ -96,7 +95,6 @@ export default {
|
||||
pattern: "^([0-9]|\\b[1-9]\\d\\b|\\b[1-2]\\d\\d\\b|\\b300\\b)$", // 修改了正则表达式，让其正确匹配0-300的数值
|
||||
message: this.$t("system_parameter_setting.front_error"),
|
||||
trigger: "blur",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
msgTimeOut: [
|
||||
@ -104,7 +102,6 @@ export default {
|
||||
pattern: "^([1-9]|[1-9][0-9]|[1-2][0-9][0-9]|3[0-5][0-9]|36[0-5])$",
|
||||
message: this.$t("system_parameter_setting.msg_error"),
|
||||
trigger: "blur",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -505,7 +505,7 @@
|
||||
row-key="jsonPath"
|
||||
ref="apiItemTable"
|
||||
>
|
||||
<el-table-column prop="originName" :label="$t('dataset.parse_filed')" :show-overflow-tooltip="true"
|
||||
<el-table-column class-name="checkbox-table" prop="originName" :label="$t('dataset.parse_filed')" :show-overflow-tooltip="true"
|
||||
width="255">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox
|
||||
@ -1365,4 +1365,15 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.checkbox-table {
|
||||
.el-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-checkbox__input {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<div class="el-drawer__body-cont">
|
||||
<div class="filter">
|
||||
<span>{{ $t("log.optype") }}</span>
|
||||
<div class="filter-item">
|
||||
@ -20,7 +21,6 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-drawer__body-cont">
|
||||
<div class="filter">
|
||||
<span>{{ $t("log.user") }}</span>
|
||||
<div class="filter-item">
|
||||
@ -243,8 +243,11 @@ export default {
|
||||
});
|
||||
}
|
||||
});
|
||||
const [min, max] = this.dataRange;
|
||||
let [min, max] = this.dataRange;
|
||||
if (min && max) {
|
||||
if (+min === +max) {
|
||||
max = +max + 24 * 3600 * 1000;
|
||||
}
|
||||
conditions.push({
|
||||
field: "time",
|
||||
operator: "between",
|
||||
@ -262,142 +265,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-drawer-task {
|
||||
.el-drawer__body-cont {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.el-drawer__header {
|
||||
padding: 16px 24px;
|
||||
margin: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #1f2329;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 57px;
|
||||
mix-blend-mode: normal;
|
||||
border-bottom: 1px solid rgba(187, 191, 196, 0.5);
|
||||
|
||||
.el-drawer__close-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-drawer__close-btn:hover {
|
||||
background: #e9e9ea;
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 12px 24px 24px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
> :nth-child(1) {
|
||||
color: #1f2329;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
width: 116px;
|
||||
}
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
.item,
|
||||
.more {
|
||||
font-family: PingFang SC;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-right: 12px;
|
||||
text-align: center;
|
||||
padding: 1px 6px;
|
||||
background: #f5f6f7;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.active,
|
||||
.more:hover {
|
||||
background: rgba(51, 112, 255, 0.1);
|
||||
color: #0c296e;
|
||||
}
|
||||
.more {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border-radius: 4px;
|
||||
padding: 5px 26px 5px 26px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #1f2329;
|
||||
border: 1px solid #bbbfc4;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.foot {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
background-color: var(--MainBG, #fff);
|
||||
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
.user-popper {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tree-select {
|
||||
.el-select-dropdown__empty,
|
||||
.el-scrollbar__wrap,
|
||||
.popper__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-popper.dept {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -124,6 +124,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="178"
|
||||
class-name="f14"
|
||||
key="datasetName"
|
||||
prop="datasetName"
|
||||
:label="$t('dataset.task.dataset')"
|
||||
@ -917,4 +918,9 @@ span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.f14 {
|
||||
.cell {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -320,8 +320,11 @@ export default {
|
||||
});
|
||||
}
|
||||
});
|
||||
const [min, max] = this.dataRange;
|
||||
let [min, max] = this.dataRange;
|
||||
if (min && max) {
|
||||
if (+min === +max) {
|
||||
max = +max + 24 * 3600 * 1000;
|
||||
}
|
||||
conditions.push({
|
||||
field: "dataset_table_task.last_exec_time",
|
||||
operator: "between",
|
||||
@ -339,143 +342,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-drawer-task {
|
||||
|
||||
.el-drawer__body-cont {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.el-drawer__header {
|
||||
padding: 16px 24px;
|
||||
margin: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #1f2329;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 57px;
|
||||
mix-blend-mode: normal;
|
||||
border-bottom: 1px solid rgba(187, 191, 196, 0.5);
|
||||
|
||||
.el-drawer__close-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-drawer__close-btn:hover {
|
||||
background: #e9e9ea;
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 12px 24px 24px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
> :nth-child(1) {
|
||||
color: #1f2329;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
width: 116px;
|
||||
}
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
.item,
|
||||
.more {
|
||||
font-family: PingFang SC;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-right: 12px;
|
||||
text-align: center;
|
||||
padding: 1px 6px;
|
||||
background: #f5f6f7;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.active,
|
||||
.more:hover {
|
||||
background: rgba(51, 112, 255, 0.1);
|
||||
color: #0c296e;
|
||||
}
|
||||
.more {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border-radius: 4px;
|
||||
padding: 5px 26px 5px 26px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #1f2329;
|
||||
border: 1px solid #bbbfc4;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.foot {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
background-color: var(--MainBG, #fff);
|
||||
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
.user-popper {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tree-select {
|
||||
.el-select-dropdown__empty,
|
||||
.el-scrollbar__wrap,
|
||||
.popper__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-popper.dept {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -308,8 +308,11 @@ export default {
|
||||
});
|
||||
}
|
||||
});
|
||||
const [min, max] = this.dataRange;
|
||||
let [min, max] = this.dataRange;
|
||||
if (min && max) {
|
||||
if (+min === +max) {
|
||||
max = +max + 24 * 3600 * 1000;
|
||||
}
|
||||
conditions.push({
|
||||
field: "dataset_table_task.last_exec_time",
|
||||
operator: "between",
|
||||
@ -327,143 +330,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-drawer-task {
|
||||
.el-drawer__body-cont {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.el-drawer__header {
|
||||
padding: 16px 24px;
|
||||
margin: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #1f2329;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 57px;
|
||||
mix-blend-mode: normal;
|
||||
border-bottom: 1px solid rgba(187, 191, 196, 0.5);
|
||||
|
||||
.el-drawer__close-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-drawer__close-btn:hover {
|
||||
background: #e9e9ea;
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 12px 24px 24px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
> :nth-child(1) {
|
||||
color: #1f2329;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
width: 116px;
|
||||
}
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
.item,
|
||||
.more {
|
||||
font-family: PingFang SC;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-right: 12px;
|
||||
text-align: center;
|
||||
padding: 1px 6px;
|
||||
background: #f5f6f7;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.active,
|
||||
.more:hover {
|
||||
background: rgba(51, 112, 255, 0.1);
|
||||
color: #0c296e;
|
||||
}
|
||||
.more {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border-radius: 4px;
|
||||
padding: 5px 26px 5px 26px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #1f2329;
|
||||
border: 1px solid #bbbfc4;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.foot {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
background-color: var(--MainBG, #fff);
|
||||
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
.user-popper {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tree-select {
|
||||
.el-select-dropdown__empty,
|
||||
.el-scrollbar__wrap,
|
||||
.popper__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-popper.dept {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -651,4 +651,4 @@ export default {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -7,114 +7,118 @@
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<div class="filter">
|
||||
<span>{{ $t('commons.status')}}</span>
|
||||
<div class="filter-item">
|
||||
<span
|
||||
class="item"
|
||||
@click="statusChange(ele.id)"
|
||||
:class="[activeStatus.includes(ele.id) ? 'active' : '']"
|
||||
:key="ele.id"
|
||||
v-for="ele in status"
|
||||
>{{ $t(ele.label) }}</span>
|
||||
<div class="el-drawer__body-cont">
|
||||
<div class="filter">
|
||||
<span>{{ $t("commons.status") }}</span>
|
||||
<div class="filter-item">
|
||||
<span
|
||||
class="item"
|
||||
@click="statusChange(ele.id)"
|
||||
:class="[activeStatus.includes(ele.id) ? 'active' : '']"
|
||||
:key="ele.id"
|
||||
v-for="ele in status"
|
||||
>{{ $t(ele.label) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<span>{{ $t('commons.organization')}}</span>
|
||||
<div class="filter-item">
|
||||
<span
|
||||
class="item"
|
||||
@click="activeDeptChange(ele.id)"
|
||||
:class="[activeDept.includes(ele.id) ? 'active' : '']"
|
||||
:key="ele.id"
|
||||
v-for="ele in selectDeptsCahe"
|
||||
>{{ ele.label }}</span>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-popper"
|
||||
width="200"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="filter">
|
||||
<span>{{ $t("commons.organization") }}</span>
|
||||
<div class="filter-item">
|
||||
<span
|
||||
class="item"
|
||||
@click="activeDeptChange(ele.id)"
|
||||
:class="[activeDept.includes(ele.id) ? 'active' : '']"
|
||||
:key="ele.id"
|
||||
v-for="ele in selectDeptsCahe"
|
||||
>{{ ele.label }}</span
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-popper dept"
|
||||
popper-class="user-popper"
|
||||
width="200"
|
||||
trigger="click"
|
||||
>
|
||||
<el-tree
|
||||
:load="loadNode"
|
||||
:lazy="true"
|
||||
:expand-on-click-node="false"
|
||||
:data="deptsComputed"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
></el-tree>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-popper dept"
|
||||
width="200"
|
||||
trigger="click"
|
||||
>
|
||||
<el-tree
|
||||
:load="loadNode"
|
||||
:lazy="true"
|
||||
:expand-on-click-node="false"
|
||||
:data="deptsComputed"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
></el-tree>
|
||||
|
||||
<el-select
|
||||
ref="roleSelect"
|
||||
v-model="selectDepts"
|
||||
slot="reference"
|
||||
popper-class="tree-select"
|
||||
multiple
|
||||
:placeholder="$t('commons.please_select')"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectDepts"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-popover>
|
||||
<span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<span>{{ $t("panel.role") }}</span>
|
||||
<div class="filter-item">
|
||||
<span
|
||||
@click="activeRoleChange(ele.id)"
|
||||
class="item"
|
||||
:class="[activeRole.includes(ele.id) ? 'active' : '']"
|
||||
:key="ele.id"
|
||||
v-for="ele in rolesValueCopy"
|
||||
>{{ ele.name }}</span
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-popper"
|
||||
width="200"
|
||||
trigger="click"
|
||||
>
|
||||
<el-select
|
||||
ref="roleSelect"
|
||||
v-model="selectDepts"
|
||||
slot="reference"
|
||||
popper-class="tree-select"
|
||||
v-model="rolesValue"
|
||||
multiple
|
||||
:placeholder="$t('commons.please_select')"
|
||||
@change="changeRole"
|
||||
@remove-tag="changeRole"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectDepts"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item"
|
||||
/>
|
||||
<el-option
|
||||
v-for="item in rolesComputed"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
<span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
|
||||
</el-popover>
|
||||
<span class="more" slot="reference">+ {{ $t('panel.more')}}</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<span>{{ $t('panel.role')}}</span>
|
||||
<div class="filter-item">
|
||||
<span
|
||||
@click="activeRoleChange(ele.id)"
|
||||
class="item"
|
||||
:class="[activeRole.includes(ele.id) ? 'active' : '']"
|
||||
:key="ele.id"
|
||||
v-for="ele in rolesValueCopy"
|
||||
>{{ ele.name }}</span
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-popper"
|
||||
width="200"
|
||||
trigger="click"
|
||||
>
|
||||
<el-select
|
||||
ref="roleSelect"
|
||||
v-model="rolesValue"
|
||||
multiple
|
||||
:placeholder="$t('commons.please_select')"
|
||||
@change="changeRole"
|
||||
@remove-tag="changeRole"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in rolesComputed"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
<span class="more" slot="reference">+ {{ $t('panel.more')}}</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<el-button class="btn normal" @click="reset">{{
|
||||
$t("commons.reset")
|
||||
}}</el-button>
|
||||
<el-button type="primary" class="btn" @click="search">{{
|
||||
$t("commons.adv_search.search")
|
||||
}}</el-button>
|
||||
<el-button class="btn normal" @click="reset">{{
|
||||
$t("commons.reset")
|
||||
}}</el-button>
|
||||
<el-button type="primary" class="btn" @click="search">{{
|
||||
$t("commons.adv_search.search")
|
||||
}}</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
@ -131,13 +135,16 @@ export default {
|
||||
deptCahe: [],
|
||||
roles: [],
|
||||
filterTextMap: [],
|
||||
status: [{
|
||||
id: 1,
|
||||
label: 'commons.enable'
|
||||
},{
|
||||
id: 0,
|
||||
label: 'commons.disable'
|
||||
}],
|
||||
status: [
|
||||
{
|
||||
id: 1,
|
||||
label: "commons.enable",
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
label: "commons.disable",
|
||||
},
|
||||
],
|
||||
activeStatus: [],
|
||||
rolesValue: [],
|
||||
activeRole: [],
|
||||
@ -150,56 +157,72 @@ export default {
|
||||
label: "label",
|
||||
isLeaf: "leaf",
|
||||
},
|
||||
userDrawer: false
|
||||
userDrawer: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rolesComputed() {
|
||||
return this.roles.filter(ele => !this.activeRole.includes(ele.id))
|
||||
return this.roles.filter((ele) => !this.activeRole.includes(ele.id));
|
||||
},
|
||||
rolesValueCopy() {
|
||||
return this.roleCahe.filter(ele => this.activeRole.includes(ele.id))
|
||||
return this.roleCahe.filter((ele) => this.activeRole.includes(ele.id));
|
||||
},
|
||||
deptsComputed() {
|
||||
return this.depts.filter(ele => !this.activeDept.includes(ele.id))
|
||||
}
|
||||
return this.depts.filter((ele) => !this.activeDept.includes(ele.id));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initRoles();
|
||||
},
|
||||
methods: {
|
||||
clearFilter() {
|
||||
Array(3).fill(1).forEach((_, index) => {
|
||||
this.clearOneFilter(index)
|
||||
})
|
||||
this.$emit('search', [], [])
|
||||
Array(3)
|
||||
.fill(1)
|
||||
.forEach((_, index) => {
|
||||
this.clearOneFilter(index);
|
||||
});
|
||||
this.$emit("search", [], []);
|
||||
},
|
||||
clearOneFilter(index) {
|
||||
(this.filterTextMap[index] || []).forEach(ele => {
|
||||
this[ele] = []
|
||||
})
|
||||
(this.filterTextMap[index] || []).forEach((ele) => {
|
||||
this[ele] = [];
|
||||
});
|
||||
},
|
||||
// 获取弹窗内部门数据
|
||||
treeByDeptId() {
|
||||
treeByDeptId(0).then((res) => {
|
||||
this.depts = (res.data || []).map(ele => {
|
||||
return {
|
||||
this.depts = (res.data || []).map((ele) => {
|
||||
return {
|
||||
...ele,
|
||||
leaf: !ele.hasChildren,
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
changeRole() {
|
||||
if (this.roleCahe.length > this.rolesValue.length + this.activeRole.length) {
|
||||
this.roleCahe = this.roleCahe.filter(ele => this.rolesValue.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
|
||||
if (
|
||||
this.roleCahe.length >
|
||||
this.rolesValue.length + this.activeRole.length
|
||||
) {
|
||||
this.roleCahe = this.roleCahe.filter((ele) =>
|
||||
this.rolesValue
|
||||
.map((ele) => ele.id)
|
||||
.concat(this.activeRole)
|
||||
.includes(ele.id)
|
||||
);
|
||||
return;
|
||||
}
|
||||
const roleIdx = this.rolesValue.findIndex(ele => !this.roleCahe.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
|
||||
if (roleIdx === -1) return
|
||||
this.activeRole.push(this.rolesValue[roleIdx].id)
|
||||
const roleIdx = this.rolesValue.findIndex(
|
||||
(ele) =>
|
||||
!this.roleCahe
|
||||
.map((ele) => ele.id)
|
||||
.concat(this.activeRole)
|
||||
.includes(ele.id)
|
||||
);
|
||||
if (roleIdx === -1) return;
|
||||
this.activeRole.push(this.rolesValue[roleIdx].id);
|
||||
this.roleCahe.push(this.rolesValue[roleIdx]);
|
||||
this.rolesValue.splice(roleIdx, 1)
|
||||
this.rolesValue.splice(roleIdx, 1);
|
||||
},
|
||||
activeRoleChange(id) {
|
||||
const roleIndex = this.activeRole.findIndex((ele) => ele === id);
|
||||
@ -216,22 +239,26 @@ export default {
|
||||
const deptIdx = this.selectDepts.findIndex((ele) => ele.id === id);
|
||||
if (deptIdx !== -1) {
|
||||
this.selectDepts.splice(deptIdx, 1);
|
||||
this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
|
||||
this.deptCahe = this.deptCahe.filter(ele => ele.id !== id)
|
||||
this.selectDeptsCahe = this.selectDeptsCahe.filter(
|
||||
(ele) => ele.id !== id
|
||||
);
|
||||
this.deptCahe = this.deptCahe.filter((ele) => ele.id !== id);
|
||||
return;
|
||||
}
|
||||
this.activeDept.push(id)
|
||||
this.activeDept.push(id);
|
||||
this.selectDeptsCahe.push({ id, label });
|
||||
this.deptCahe.push({ id, label });
|
||||
},
|
||||
activeDeptChange(id) {
|
||||
const dept = this.deptCahe.find((ele) => ele.id === id)
|
||||
const dept = this.deptCahe.find((ele) => ele.id === id);
|
||||
this.selectDepts.push(dept);
|
||||
this.activeDept = this.activeDept.filter(ele => ele !== id)
|
||||
this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
|
||||
this.activeDept = this.activeDept.filter((ele) => ele !== id);
|
||||
this.selectDeptsCahe = this.selectDeptsCahe.filter(
|
||||
(ele) => ele.id !== id
|
||||
);
|
||||
},
|
||||
statusChange(id) {
|
||||
const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
|
||||
const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
|
||||
if (statusIndex === -1) {
|
||||
this.activeStatus.push(id);
|
||||
} else {
|
||||
@ -239,8 +266,8 @@ export default {
|
||||
}
|
||||
},
|
||||
changeDepts() {
|
||||
const depts = this.selectDepts.map((item) => item.id);
|
||||
this.activeDept = this.activeDept.filter((ele) => depts.includes(ele));
|
||||
const depts = this.selectDepts.map((item) => item.id);
|
||||
this.activeDept = this.activeDept.filter((ele) => depts.includes(ele));
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (!this.depts.length) {
|
||||
@ -248,7 +275,9 @@ export default {
|
||||
return;
|
||||
}
|
||||
getDeptTree(node.data.id).then((res) => {
|
||||
const filterDept = (res.data || []).filter(ele => !this.activeDept.includes(ele.deptId))
|
||||
const filterDept = (res.data || []).filter(
|
||||
(ele) => !this.activeDept.includes(ele.deptId)
|
||||
);
|
||||
resolve(
|
||||
filterDept.map((dept) => {
|
||||
return this.normalizer(dept);
|
||||
@ -270,38 +299,61 @@ export default {
|
||||
},
|
||||
search() {
|
||||
this.userDrawer = false;
|
||||
this.$emit('search', this.formatCondition(), this.formatText())
|
||||
this.$emit("search", this.formatCondition(), this.formatText());
|
||||
},
|
||||
formatText() {
|
||||
this.filterTextMap = [];
|
||||
const params = [];
|
||||
if (this.activeStatus.length) {
|
||||
let str = `${this.$t('kettle.status')}:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label + '、' + pre, '')}`;
|
||||
params.push(str.slice(0, str.length - 1 ))
|
||||
this.filterTextMap.push(['activeStatus'])
|
||||
let str = `${this.$t("kettle.status")}:${this.activeStatus.reduce(
|
||||
(pre, next) =>
|
||||
(this.status.find((ele) => ele.id === next) || {}).label +
|
||||
"、" +
|
||||
pre,
|
||||
""
|
||||
)}`;
|
||||
params.push(str.slice(0, str.length - 1));
|
||||
this.filterTextMap.push(["activeStatus"]);
|
||||
}
|
||||
if (this.activeDept.length) {
|
||||
params.push(`${this.$t('panel.org')}:${this.selectDeptsCahe.map(ele => ele.label).join('、')}`)
|
||||
this.filterTextMap.push(['activeDept', 'selectDepts', 'selectDeptsCahe', 'deptCahe'])
|
||||
params.push(
|
||||
`${this.$t("panel.org")}:${this.selectDeptsCahe
|
||||
.map((ele) => ele.label)
|
||||
.join("、")}`
|
||||
);
|
||||
this.filterTextMap.push([
|
||||
"activeDept",
|
||||
"selectDepts",
|
||||
"selectDeptsCahe",
|
||||
"deptCahe",
|
||||
]);
|
||||
}
|
||||
if (this.activeRole.length) {
|
||||
params.push(`${this.$t('panel.role')}:${this.rolesValueCopy.map(ele => ele.name).join('、')}`)
|
||||
this.filterTextMap.push(['rolesValue', 'activeRole', 'roleCahe'])
|
||||
params.push(
|
||||
`${this.$t("panel.role")}:${this.rolesValueCopy
|
||||
.map((ele) => ele.name)
|
||||
.join("、")}`
|
||||
);
|
||||
this.filterTextMap.push(["rolesValue", "activeRole", "roleCahe"]);
|
||||
}
|
||||
return params;
|
||||
},
|
||||
formatCondition() {
|
||||
const fildMap = {'r.role_id': this.activeRole, 'd.dept_id': this.activeDept, 'u.enabled': this.activeStatus}
|
||||
const conditions = []
|
||||
Object.keys(fildMap).forEach(ele => {
|
||||
const fildMap = {
|
||||
"r.role_id": this.activeRole,
|
||||
"d.dept_id": this.activeDept,
|
||||
"u.enabled": this.activeStatus,
|
||||
};
|
||||
const conditions = [];
|
||||
Object.keys(fildMap).forEach((ele) => {
|
||||
if (fildMap[ele].length) {
|
||||
conditions.push({
|
||||
field: ele,
|
||||
operator: 'in',
|
||||
value: fildMap[ele]
|
||||
})
|
||||
operator: "in",
|
||||
value: fildMap[ele],
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
return conditions;
|
||||
},
|
||||
init() {
|
||||
@ -309,134 +361,8 @@ export default {
|
||||
},
|
||||
reset() {
|
||||
this.userDrawer = false;
|
||||
this.clearFilter()
|
||||
this.clearFilter();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-drawer {
|
||||
.el-drawer__header {
|
||||
padding: 16px 24px;
|
||||
margin: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #1f2329;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 57px;
|
||||
mix-blend-mode: normal;
|
||||
border-bottom: 1px solid rgba(187, 191, 196, 0.5);
|
||||
|
||||
.el-drawer__close-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.el-drawer__close-btn:hover {
|
||||
background: #e9e9ea;
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 12px 24px 24px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
> :nth-child(1) {
|
||||
color: #1f2329;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
width: 116px;
|
||||
}
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
.item,
|
||||
.more {
|
||||
font-family: PingFang SC;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-right: 12px;
|
||||
text-align: center;
|
||||
padding: 1px 6px;
|
||||
background: #f5f6f7;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.active,
|
||||
.more:hover{
|
||||
background: rgba(51, 112, 255, 0.1);
|
||||
color: #0c296e;
|
||||
}
|
||||
.more {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border-radius: 4px;
|
||||
padding: 5px 26px 5px 26px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #1f2329;
|
||||
border: 1px solid #bbbfc4;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.foot {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.user-popper {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tree-select {
|
||||
.el-select-dropdown__empty,
|
||||
.el-scrollbar__wrap,
|
||||
.popper__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-popper.dept {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user