mirror of
https://github.com/dataease/dataease.git
synced 2026-05-21 12:45:37 +08:00
fix: 样式优化
This commit is contained in:
dataeaseShu
@@ -10,6 +10,8 @@ export default {
|
||||
dateRange: 'Date Range Picker',
|
||||
add_component_hint: 'Click or drag the component on the left to add a field'
|
||||
},
|
||||
list_selection: 'List selection',
|
||||
date_setting: 'Date setting',
|
||||
openMobileTerminal: 'Open mobile terminal',
|
||||
watermarkManagement: 'Watermark Management',
|
||||
inputText: 'Please enter',
|
||||
|
||||
@@ -10,6 +10,8 @@ export default {
|
||||
dateRange: '時間範圍',
|
||||
add_component_hint: '點選或拖曳左側元件新增欄位'
|
||||
},
|
||||
list_selection: '清單選擇',
|
||||
date_setting: '日期設定',
|
||||
openMobileTerminal: '開啟行動端',
|
||||
watermarkManagement: '水印管理',
|
||||
inputText: '請輸入',
|
||||
|
||||
@@ -2,6 +2,8 @@ export default {
|
||||
common: {
|
||||
timeout_tips: '请求超时，请稍后再试',
|
||||
watermarkManagement: '水印管理',
|
||||
list_selection: '列表选择',
|
||||
date_setting: '日期设置',
|
||||
component: {
|
||||
input: '单行输入',
|
||||
textarea: '多行输入',
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
|
||||
import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
|
||||
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
|
||||
import { ref, inject, computed, watch, onBeforeMount, toRefs, nextTick } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
@@ -109,10 +110,6 @@ const computedFiledList = computed(() => {
|
||||
return Object.values(filedList.value || {})
|
||||
})
|
||||
|
||||
watch(checkResult, () => {
|
||||
cancelfixValue()
|
||||
})
|
||||
|
||||
const authTargetType = ref('')
|
||||
|
||||
watch(
|
||||
@@ -132,8 +129,27 @@ onBeforeMount(() => {
|
||||
})
|
||||
|
||||
const confirm = () => {
|
||||
cancelfixValue()
|
||||
enumInput.value.$el.click()
|
||||
}
|
||||
|
||||
const cancelSelect = () => {
|
||||
const { enumValue } = item.value
|
||||
const arr = enumValue.trim() ? enumValue.split(',') : []
|
||||
checklist.value = arr
|
||||
checkboxlist.value = checkListWithFilter.value.filter(ele => arr.includes(ele))
|
||||
if (checkboxlist.value.length) {
|
||||
checkAll.value = checkboxlist.value.length === checkListWithFilter.value.length
|
||||
isIndeterminate.value = checkboxlist.value.length !== checkListWithFilter.value.length
|
||||
}
|
||||
|
||||
if (!checkboxlist.value.length) {
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
enumInput.value.$el.click()
|
||||
}
|
||||
|
||||
const initNameEnumName = () => {
|
||||
const { name, enumValue, fieldId } = item.value
|
||||
const arr = enumValue.trim() ? enumValue.split(',') : []
|
||||
@@ -171,6 +187,16 @@ const initEnumOptions = () => {
|
||||
if (filterType === 'enum' && [0, 5, 7].includes(deType)) {
|
||||
multFieldValuesForPermissions({ fieldIds: [fieldId] }).then(res => {
|
||||
enumList.value = optionData(res.data)
|
||||
checkboxlist.value = enumList.value.filter(ele => checklist.value.includes(ele))
|
||||
if (checkboxlist.value.length) {
|
||||
checkAll.value = checkboxlist.value.length === enumList.value.length
|
||||
isIndeterminate.value = checkboxlist.value.length !== enumList.value.length
|
||||
}
|
||||
|
||||
if (!checkboxlist.value.length) {
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -185,10 +211,10 @@ const handleClick = () => {
|
||||
}
|
||||
|
||||
const relativeToCurrentTypeMap = {
|
||||
year: '年',
|
||||
month: '月',
|
||||
date: '日',
|
||||
datetime: '日'
|
||||
year: t('cron.year'),
|
||||
month: t('cron.month'),
|
||||
date: t('cron.day'),
|
||||
datetime: t('cron.day')
|
||||
}
|
||||
function formatDate(str) {
|
||||
// 根据 - 符号拆分
|
||||
@@ -225,35 +251,35 @@ const confirmTimeSelect = () => {
|
||||
if (relativeToCurrent !== 'custom') {
|
||||
item.value.timeValue = [
|
||||
{
|
||||
label: '今年',
|
||||
label: t('dynamic_year.current'),
|
||||
value: 'thisYear'
|
||||
},
|
||||
{
|
||||
label: '去年',
|
||||
label: t('dynamic_year.last'),
|
||||
value: 'lastYear'
|
||||
},
|
||||
{
|
||||
label: '本月',
|
||||
label: t('cron.this_month'),
|
||||
value: 'thisMonth'
|
||||
},
|
||||
{
|
||||
label: '上月',
|
||||
label: t('dynamic_month.last'),
|
||||
value: 'lastMonth'
|
||||
},
|
||||
{
|
||||
label: '今天',
|
||||
label: t('dynamic_time.today'),
|
||||
value: 'today'
|
||||
},
|
||||
{
|
||||
label: '昨天',
|
||||
label: t('dynamic_time.yesterday'),
|
||||
value: 'yesterday'
|
||||
},
|
||||
{
|
||||
label: '月初',
|
||||
label: t('dynamic_time.firstOfMonth'),
|
||||
value: 'monthBeginning'
|
||||
},
|
||||
{
|
||||
label: '年初',
|
||||
label: t('dynamic_time.firstOfYear'),
|
||||
value: 'yearBeginning'
|
||||
}
|
||||
].find(ele => ele.value === relativeToCurrent).label
|
||||
@@ -261,7 +287,7 @@ const confirmTimeSelect = () => {
|
||||
return
|
||||
}
|
||||
item.value.timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
|
||||
around === 'f' ? '前' : '后'
|
||||
around === 'f' ? t('dynamic_time.before') : t('dynamic_time.after')
|
||||
}`
|
||||
if (timeGranularity === 'datetime') {
|
||||
item.value.timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
|
||||
@@ -280,8 +306,10 @@ const cancel = () => {
|
||||
const cancelfixValue = () => {
|
||||
item.value.enumValue = checkResult.value || ''
|
||||
}
|
||||
const delChecks = idx => {
|
||||
const delChecks = (idx, i) => {
|
||||
checklist.value.splice(idx, 1)
|
||||
checkboxlist.value = checkboxlist.value.filter(ele => ele !== i)
|
||||
selectedChange()
|
||||
}
|
||||
const selectItem = ({ name, id, deType }) => {
|
||||
activeName.value = name
|
||||
@@ -320,22 +348,76 @@ const filterListInit = deType => {
|
||||
const filterListTime = [
|
||||
{
|
||||
value: 'dateValue',
|
||||
label: '固定值'
|
||||
label: t('auth.fixed_value')
|
||||
},
|
||||
{
|
||||
value: 'dynamicDate',
|
||||
label: '动态值'
|
||||
label: t('chart.dynamic')
|
||||
}
|
||||
]
|
||||
const clearAll = () => {
|
||||
checklist.value = []
|
||||
checkboxlist.value = []
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
|
||||
const selectAll = () => {
|
||||
checkListWithFilter.value.forEach(ele => {
|
||||
if (!checklist.value.includes(ele)) {
|
||||
checklist.value.push(ele)
|
||||
}
|
||||
})
|
||||
checkboxlist.value = [...new Set([...checkListWithFilter.value, ...checkboxlist.value])]
|
||||
}
|
||||
|
||||
const isIndeterminate = ref(false)
|
||||
const checkAll = ref(false)
|
||||
const checkboxlist = ref([])
|
||||
let oldList = []
|
||||
watch(
|
||||
() => checkListWithFilter.value,
|
||||
val => {
|
||||
if (!oldList.length && val.length !== enumList.value.length) {
|
||||
oldList = [...checkboxlist.value]
|
||||
}
|
||||
|
||||
if (oldList.length && val.length === enumList.value.length) {
|
||||
oldList = []
|
||||
}
|
||||
|
||||
const result = val.every(ele => checkboxlist.value.includes(ele))
|
||||
isIndeterminate.value = val.length && checkboxlist.value.length && !result
|
||||
checkAll.value = val.length && result
|
||||
}
|
||||
)
|
||||
const selectedChange = () => {
|
||||
const notSelectList = checkListWithFilter.value.filter(ele => !checkboxlist.value.includes(ele))
|
||||
const newCheckboxlist = [...checkboxlist.value]
|
||||
checklist.value = [...new Set(checklist.value.concat(checkboxlist.value))].filter(
|
||||
ele => !notSelectList.includes(ele)
|
||||
)
|
||||
checkboxlist.value = [...new Set(oldList.concat(checkboxlist.value))].filter(
|
||||
ele => !notSelectList.includes(ele)
|
||||
)
|
||||
if (newCheckboxlist.length) {
|
||||
checkAll.value = newCheckboxlist.length === checkListWithFilter.value.length
|
||||
isIndeterminate.value = newCheckboxlist.length !== checkListWithFilter.value.length
|
||||
}
|
||||
|
||||
if (!newCheckboxlist.length) {
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
}
|
||||
const checkAllChange = val => {
|
||||
if (val) {
|
||||
selectAll()
|
||||
} else {
|
||||
checkboxlist.value = checkboxlist.value.filter(ele => !checkListWithFilter.value.includes(ele))
|
||||
checklist.value = checklist.value.filter(ele => !checkListWithFilter.value.includes(ele))
|
||||
}
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const addFields = () => {
|
||||
const list = textareaValue.value.split('\n').reduce((pre, next) => {
|
||||
@@ -349,14 +431,6 @@ const addFields = () => {
|
||||
}
|
||||
showTextArea.value = false
|
||||
}
|
||||
const checkItem = i => {
|
||||
const index = checklist.value.findIndex(ele => ele === i)
|
||||
if (index === -1) {
|
||||
checklist.value.push(i)
|
||||
} else {
|
||||
delChecks(index)
|
||||
}
|
||||
}
|
||||
|
||||
const emits = defineEmits(['update:item', 'del'])
|
||||
</script>
|
||||
@@ -529,39 +603,35 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
:hide-on-click="false"
|
||||
>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="item.enumValue"
|
||||
ref="enumInput"
|
||||
size="small"
|
||||
@input="cancelfixValue"
|
||||
clearable
|
||||
@clear="clearAll"
|
||||
>
|
||||
<el-input v-model="item.enumValue" ref="enumInput" size="small" readonly clearable>
|
||||
</el-input>
|
||||
</template>
|
||||
<div class="de-panel clearfix">
|
||||
<div class="mod-left">
|
||||
<el-input :placeholder="t('auth.enter_keywords')" v-model="filterFiled"> </el-input>
|
||||
<ul class="infinite-list autochecker-list" style="height: 231px; overflow: auto">
|
||||
<li
|
||||
:key="i"
|
||||
v-for="i in checkListWithFilter"
|
||||
class="infinite-list-item"
|
||||
@click="checkItem(i)"
|
||||
:title="i"
|
||||
>
|
||||
<i class="el-icon-check" :style="{ opacity: checklist.includes(i) ? 1 : 0 }"></i>
|
||||
<label>{{ i }}</label>
|
||||
<span>+</span>
|
||||
</li>
|
||||
<ul class="autochecker-list" style="height: 260px">
|
||||
<div class="select-all">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
:label="t('component.allSelect')"
|
||||
@change="checkAllChange"
|
||||
/>
|
||||
</div>
|
||||
<el-checkbox-group v-model="checkboxlist" @change="selectedChange">
|
||||
<el-scrollbar height="230px">
|
||||
<li :key="i" v-for="i in checkListWithFilter" :title="i">
|
||||
<el-checkbox :label="i">
|
||||
{{ i }}
|
||||
</el-checkbox>
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</el-checkbox-group>
|
||||
</ul>
|
||||
<el-button style="width: 100%" type="primary" @click="selectAll">
|
||||
{{ t('auth.select_all') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mod-left right-de">
|
||||
<div class="right-top clearfix">
|
||||
{{ t('auth.added') + ' ' + checklist.length }}
|
||||
{{ t('common.list_selection') }}
|
||||
<div class="right-btn">
|
||||
<span @click="cancelKeyDow">
|
||||
<i class="el-icon-edit"></i>
|
||||
@@ -588,33 +658,28 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="infinite-list autochecker-list" style="overflow: auto">
|
||||
<li :key="i" v-for="(i, idx) in checklist" class="infinite-list-item">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="light"
|
||||
:content="i"
|
||||
placement="top"
|
||||
:open-delay="1000"
|
||||
>
|
||||
<label>{{ i }}</label>
|
||||
</el-tooltip>
|
||||
<el-icon @click="delChecks(idx)" style="color: #646a73">
|
||||
<Icon><icon_deleteTrash_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="right-menu-foot">
|
||||
<div class="footer-left"> </div>
|
||||
<el-button type="primary" @click="confirm">
|
||||
{{ t('auth.sure') }}
|
||||
</el-button>
|
||||
<div class="footer-right">
|
||||
<el-icon style="color: #646a73" @click="clearAll">
|
||||
<Icon><icon_deleteTrash_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<ul class="autochecker-list">
|
||||
<div class="clear-checkbox__label">
|
||||
<span>{{ t('auth.added') + ' ' + checklist.length }}</span
|
||||
><span @click="clearAll">{{ t('user.clear_button') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar height="230px">
|
||||
<li :key="i" v-for="(i, idx) in checklist">
|
||||
<div :title="i" class="right-checkbox__label">{{ i }}</div>
|
||||
<el-icon @click="delChecks(idx, i)" class="remove-hover-icon">
|
||||
<Icon><icon_close_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right-menu-foot">
|
||||
<el-button secondary @click="cancelSelect">
|
||||
{{ t('common.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="confirm">
|
||||
{{ t('auth.sure') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
@@ -629,14 +694,16 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
class="create-dialog"
|
||||
append-to-body
|
||||
v-model="dialogVisible"
|
||||
title="日期设置"
|
||||
:title="t('common.date_setting')"
|
||||
width="420"
|
||||
>
|
||||
<TimeDialog ref="timeDialog"></TimeDialog>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmTimeSelect"> 确定 </el-button>
|
||||
<el-button @click="dialogVisible = false">{{ t('dataset.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirmTimeSelect">
|
||||
{{ t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@@ -929,6 +996,18 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
background-color: #fff;
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
.right-menu-foot {
|
||||
text-align: right;
|
||||
padding: 5px;
|
||||
float: right;
|
||||
width: 100%;
|
||||
border-top: 1px solid hsla(0, 0%, 59%, 0.1);
|
||||
.ed-button {
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
.mod-left {
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
@@ -976,82 +1055,81 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
border-left: 1px solid hsla(0, 0%, 59%, 0.1);
|
||||
}
|
||||
.autochecker-list {
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
height: 221px;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
direction: ltr;
|
||||
.select-all {
|
||||
padding: 0 5px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.ed-checkbox__label {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f8fa;
|
||||
color: #2153d4;
|
||||
opacity: 1;
|
||||
span {
|
||||
display: block;
|
||||
.clear-checkbox__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
padding: 0 5px;
|
||||
height: 32px;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
:nth-child(2) {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 4px;
|
||||
padding: 0 4px;
|
||||
color: #3370ff;
|
||||
&:hover {
|
||||
background-color: #3370ff1a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
display: inline-block;
|
||||
}
|
||||
.right-checkbox__label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 140px;
|
||||
color: #1f2329;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 12px;
|
||||
direction: ltr;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
touch-action: manipulation;
|
||||
width: 87%;
|
||||
height: 28px;
|
||||
line-height: 14px;
|
||||
padding: 8px 20px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
li {
|
||||
padding: 0 5px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.ed-checkbox__label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 11px;
|
||||
top: 6px;
|
||||
right: 5px;
|
||||
font-size: 15px;
|
||||
&:hover {
|
||||
background-color: #1f23291a;
|
||||
}
|
||||
|
||||
.remove-hover-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
background: #2153d4;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 999px;
|
||||
color: #8f959e;
|
||||
margin: 4px;
|
||||
&:hover {
|
||||
width: 24px;
|
||||
margin: 0px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
background-color: #1f23291a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1065,7 +1143,7 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 35px;
|
||||
line-height: 27px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -1085,28 +1163,6 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu-foot {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
text-align: right;
|
||||
line-height: 30px;
|
||||
margin-top: 9px;
|
||||
border-top: 1px solid hsla(0, 0%, 59%, 0.1);
|
||||
|
||||
.footer-left {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
float: right;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
|
||||
import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
|
||||
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
|
||||
import { ref, inject, computed, watch, onBeforeMount, toRefs } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
@@ -103,10 +104,6 @@ const computedFiledList = computed(() => {
|
||||
return Object.values(filedList.value || {})
|
||||
})
|
||||
|
||||
watch(checkResult, () => {
|
||||
cancelfixValue()
|
||||
})
|
||||
|
||||
const authTargetType = ref('')
|
||||
|
||||
watch(
|
||||
@@ -126,6 +123,24 @@ onBeforeMount(() => {
|
||||
})
|
||||
|
||||
const confirm = () => {
|
||||
cancelfixValue()
|
||||
enumInput.value.$el.click()
|
||||
}
|
||||
|
||||
const cancelSelect = () => {
|
||||
const { enumValue } = item.value
|
||||
const arr = enumValue.trim() ? enumValue.split(',') : []
|
||||
checklist.value = arr
|
||||
checkboxlist.value = checkListWithFilter.value.filter(ele => arr.includes(ele))
|
||||
if (checkboxlist.value.length) {
|
||||
checkAll.value = checkboxlist.value.length === checkListWithFilter.value.length
|
||||
isIndeterminate.value = checkboxlist.value.length !== checkListWithFilter.value.length
|
||||
}
|
||||
|
||||
if (!checkboxlist.value.length) {
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
enumInput.value.$el.click()
|
||||
}
|
||||
const initNameEnumName = () => {
|
||||
@@ -161,6 +176,16 @@ const initEnumOptions = () => {
|
||||
if (filterType === 'enum' && [0, 5, 7].includes(deType)) {
|
||||
multFieldValuesForPermissions({ fieldIds: [fieldId] }).then(res => {
|
||||
enumList.value = optionData(res.data)
|
||||
checkboxlist.value = enumList.value.filter(ele => checklist.value.includes(ele))
|
||||
if (checkboxlist.value.length) {
|
||||
checkAll.value = checkboxlist.value.length === enumList.value.length
|
||||
isIndeterminate.value = checkboxlist.value.length !== enumList.value.length
|
||||
}
|
||||
|
||||
if (!checkboxlist.value.length) {
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -175,8 +200,10 @@ const cancel = () => {
|
||||
const cancelfixValue = () => {
|
||||
item.value.enumValue = checkResult.value || ''
|
||||
}
|
||||
const delChecks = idx => {
|
||||
const delChecks = (idx, i) => {
|
||||
checklist.value.splice(idx, 1)
|
||||
checkboxlist.value = checkboxlist.value.filter(ele => ele !== i)
|
||||
selectedChange()
|
||||
}
|
||||
const selectItem = ({ name, id, deType }) => {
|
||||
activeName.value = name
|
||||
@@ -212,6 +239,9 @@ const filterListInit = deType => {
|
||||
|
||||
const clearAll = () => {
|
||||
checklist.value = []
|
||||
checkboxlist.value = []
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const selectAll = () => {
|
||||
checkListWithFilter.value.forEach(ele => {
|
||||
@@ -219,6 +249,56 @@ const selectAll = () => {
|
||||
checklist.value.push(ele)
|
||||
}
|
||||
})
|
||||
checkboxlist.value = [...new Set([...checkListWithFilter.value, ...checkboxlist.value])]
|
||||
}
|
||||
|
||||
const isIndeterminate = ref(false)
|
||||
const checkAll = ref(false)
|
||||
const checkboxlist = ref([])
|
||||
let oldList = []
|
||||
watch(
|
||||
() => checkListWithFilter.value,
|
||||
val => {
|
||||
if (!oldList.length && val.length !== enumList.value.length) {
|
||||
oldList = [...checkboxlist.value]
|
||||
}
|
||||
|
||||
if (oldList.length && val.length === enumList.value.length) {
|
||||
oldList = []
|
||||
}
|
||||
|
||||
const result = val.every(ele => checkboxlist.value.includes(ele))
|
||||
isIndeterminate.value = val.length && checkboxlist.value.length && !result
|
||||
checkAll.value = val.length && result
|
||||
}
|
||||
)
|
||||
const selectedChange = () => {
|
||||
const notSelectList = checkListWithFilter.value.filter(ele => !checkboxlist.value.includes(ele))
|
||||
const newCheckboxlist = [...checkboxlist.value]
|
||||
checklist.value = [...new Set(checklist.value.concat(checkboxlist.value))].filter(
|
||||
ele => !notSelectList.includes(ele)
|
||||
)
|
||||
checkboxlist.value = [...new Set(oldList.concat(checkboxlist.value))].filter(
|
||||
ele => !notSelectList.includes(ele)
|
||||
)
|
||||
if (newCheckboxlist.length) {
|
||||
checkAll.value = newCheckboxlist.length === checkListWithFilter.value.length
|
||||
isIndeterminate.value = newCheckboxlist.length !== checkListWithFilter.value.length
|
||||
}
|
||||
|
||||
if (!newCheckboxlist.length) {
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
}
|
||||
const checkAllChange = val => {
|
||||
if (val) {
|
||||
selectAll()
|
||||
} else {
|
||||
checkboxlist.value = checkboxlist.value.filter(ele => !checkListWithFilter.value.includes(ele))
|
||||
checklist.value = checklist.value.filter(ele => !checkListWithFilter.value.includes(ele))
|
||||
}
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const addFields = () => {
|
||||
const list = textareaValue.value.split('\n').reduce((pre, next) => {
|
||||
@@ -232,14 +312,6 @@ const addFields = () => {
|
||||
}
|
||||
showTextArea.value = false
|
||||
}
|
||||
const checkItem = i => {
|
||||
const index = checklist.value.findIndex(ele => ele === i)
|
||||
if (index === -1) {
|
||||
checklist.value.push(i)
|
||||
} else {
|
||||
delChecks(index)
|
||||
}
|
||||
}
|
||||
|
||||
const emits = defineEmits(['update:item', 'del'])
|
||||
</script>
|
||||
@@ -379,39 +451,35 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
:hide-on-click="false"
|
||||
>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="item.enumValue"
|
||||
ref="enumInput"
|
||||
size="small"
|
||||
@input="cancelfixValue"
|
||||
clearable
|
||||
@clear="clearAll"
|
||||
>
|
||||
<el-input v-model="item.enumValue" ref="enumInput" size="small" readonly clearable>
|
||||
</el-input>
|
||||
</template>
|
||||
<div class="de-panel clearfix">
|
||||
<div class="mod-left">
|
||||
<el-input :placeholder="t('auth.enter_keywords')" v-model="filterFiled"> </el-input>
|
||||
<ul class="infinite-list autochecker-list" style="height: 231px; overflow: auto">
|
||||
<li
|
||||
:key="i"
|
||||
v-for="i in checkListWithFilter"
|
||||
class="infinite-list-item"
|
||||
@click="checkItem(i)"
|
||||
:title="i"
|
||||
>
|
||||
<i class="el-icon-check" :style="{ opacity: checklist.includes(i) ? 1 : 0 }"></i>
|
||||
<label>{{ i }}</label>
|
||||
<span>+</span>
|
||||
</li>
|
||||
<ul class="autochecker-list" style="height: 260px">
|
||||
<div class="select-all">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
:label="t('component.allSelect')"
|
||||
@change="checkAllChange"
|
||||
/>
|
||||
</div>
|
||||
<el-checkbox-group v-model="checkboxlist" @change="selectedChange">
|
||||
<el-scrollbar height="230px">
|
||||
<li :key="i" v-for="i in checkListWithFilter" :title="i">
|
||||
<el-checkbox :label="i">
|
||||
{{ i }}
|
||||
</el-checkbox>
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</el-checkbox-group>
|
||||
</ul>
|
||||
<el-button style="width: 100%" type="primary" @click="selectAll">
|
||||
{{ t('auth.select_all') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mod-left right-de">
|
||||
<div class="right-top clearfix">
|
||||
{{ t('auth.added') }}{{ checklist.length }}
|
||||
{{ t('common.list_selection') }}
|
||||
<div class="right-btn">
|
||||
<span @click="cancelKeyDow">
|
||||
<i class="el-icon-edit"></i>
|
||||
@@ -438,33 +506,28 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="infinite-list autochecker-list" style="overflow: auto">
|
||||
<li :key="i" v-for="(i, idx) in checklist" class="infinite-list-item">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="light"
|
||||
:content="i"
|
||||
placement="top"
|
||||
:open-delay="1000"
|
||||
>
|
||||
<label>{{ i }}</label>
|
||||
</el-tooltip>
|
||||
<el-icon @click="delChecks(idx)" style="color: #646a73">
|
||||
<Icon><icon_deleteTrash_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="right-menu-foot">
|
||||
<div class="footer-left"> </div>
|
||||
<el-button type="primary" @click="confirm">
|
||||
{{ t('auth.sure') }}
|
||||
</el-button>
|
||||
<div class="footer-right">
|
||||
<el-icon style="color: #646a73" @click="clearAll">
|
||||
<Icon><icon_deleteTrash_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<ul class="autochecker-list">
|
||||
<div class="clear-checkbox__label">
|
||||
<span>{{ t('auth.added') + ' ' + checklist.length }}</span
|
||||
><span @click="clearAll">{{ t('user.clear_button') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar height="230px">
|
||||
<li :key="i" v-for="(i, idx) in checklist">
|
||||
<div :title="i" class="right-checkbox__label">{{ i }}</div>
|
||||
<el-icon @click="delChecks(idx, i)" class="remove-hover-icon">
|
||||
<Icon><icon_close_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right-menu-foot">
|
||||
<el-button secondary @click="cancelSelect">
|
||||
{{ t('common.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="confirm">
|
||||
{{ t('auth.sure') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
@@ -764,6 +827,18 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
background-color: #fff;
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
.right-menu-foot {
|
||||
text-align: right;
|
||||
padding: 5px;
|
||||
float: right;
|
||||
width: 100%;
|
||||
border-top: 1px solid hsla(0, 0%, 59%, 0.1);
|
||||
.ed-button {
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
.mod-left {
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
@@ -811,82 +886,80 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
border-left: 1px solid hsla(0, 0%, 59%, 0.1);
|
||||
}
|
||||
.autochecker-list {
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
height: 221px;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
direction: ltr;
|
||||
.select-all {
|
||||
padding: 0 5px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.ed-checkbox__label {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f8fa;
|
||||
color: #2153d4;
|
||||
opacity: 1;
|
||||
span {
|
||||
display: block;
|
||||
.clear-checkbox__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
padding: 0 5px;
|
||||
height: 32px;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
:nth-child(2) {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 4px;
|
||||
padding: 0 4px;
|
||||
color: #3370ff;
|
||||
&:hover {
|
||||
background-color: #3370ff1a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 12px;
|
||||
direction: ltr;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
touch-action: manipulation;
|
||||
width: 87%;
|
||||
height: 28px;
|
||||
line-height: 14px;
|
||||
padding: 8px 20px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
.right-checkbox__label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 140px;
|
||||
color: #1f2329;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
li {
|
||||
padding: 0 5px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.ed-checkbox__label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 11px;
|
||||
top: 6px;
|
||||
right: 5px;
|
||||
font-size: 15px;
|
||||
&:hover {
|
||||
background-color: #1f23291a;
|
||||
}
|
||||
|
||||
.remove-hover-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
background: #2153d4;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 999px;
|
||||
color: #8f959e;
|
||||
margin: 4px;
|
||||
&:hover {
|
||||
width: 24px;
|
||||
margin: 0px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
background-color: #1f23291a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -900,7 +973,7 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 35px;
|
||||
line-height: 27px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -920,28 +993,6 @@ const emits = defineEmits(['update:item', 'del'])
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu-foot {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
text-align: right;
|
||||
line-height: 30px;
|
||||
margin-top: 9px;
|
||||
border-top: 1px solid hsla(0, 0%, 59%, 0.1);
|
||||
|
||||
.footer-left {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
float: right;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user