|
|
@@ -25,47 +25,45 @@
|
|
|
<div class="options-container" v-if="hasDevModePermisson() && devMode">
|
|
|
<div class="option-title">直接推送问题类型:</div>
|
|
|
<div class="option-tags" :class="expandAll ? 'hide-style' : ''" id="option-id">
|
|
|
- <el-tag
|
|
|
- class="option-tag"
|
|
|
- v-for="item in tags"
|
|
|
- :key="item.id"
|
|
|
- type="info"
|
|
|
- closable
|
|
|
- @close="handleDeleteTag(item)"
|
|
|
- >{{ item.algoName }}</el-tag
|
|
|
- >
|
|
|
<el-tooltip effect="light" placement="top-start">
|
|
|
<template #content>
|
|
|
选择可直接推送到前台展示的违规问题类型<br />选择后检测到该类型问题发生时直接展示在前台问题列表
|
|
|
</template>
|
|
|
<span>
|
|
|
- <el-popover placement="bottom" trigger="click" :width="265">
|
|
|
+ <el-popover
|
|
|
+ placement="bottom-start"
|
|
|
+ trigger="click"
|
|
|
+ :width="240"
|
|
|
+ popper-style="height: 400px; overflow: auto;"
|
|
|
+ >
|
|
|
<template #reference>
|
|
|
<div class="add-options">+</div>
|
|
|
</template>
|
|
|
- <el-select
|
|
|
- v-model="optionValue"
|
|
|
- multiple
|
|
|
- collapse-tags
|
|
|
- placeholder="请选择问题类型"
|
|
|
- style="width: 240px"
|
|
|
- :teleported="false"
|
|
|
- >
|
|
|
- <el-option
|
|
|
+ <template #default>
|
|
|
+ <div
|
|
|
v-for="item in options"
|
|
|
:key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
- <template #footer>
|
|
|
- <el-button type="primary" @click="handleAddTags"> 确定 </el-button>
|
|
|
- </template>
|
|
|
- </el-select>
|
|
|
+ class="common-option"
|
|
|
+ :class="isOptionInTags(item.id) ? 'chosen-option' : ''"
|
|
|
+ @click="handleChangeTagStatus(item.id)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-popover>
|
|
|
</span>
|
|
|
</el-tooltip>
|
|
|
+ <el-tag
|
|
|
+ class="option-tag"
|
|
|
+ v-for="item in tags"
|
|
|
+ :key="item.id"
|
|
|
+ type="info"
|
|
|
+ closable
|
|
|
+ @close="handleDeleteTag(item)"
|
|
|
+ >{{ item.algoName }}</el-tag
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class="option-expand" @click="expandAll = !expandAll" v-if="isExpandAllExist">
|
|
|
+ <div v-if="isExpandAllExist" class="option-expand" @click="expandAll = !expandAll">
|
|
|
<div v-if="expandAll"
|
|
|
><el-icon><ArrowDown /></el-icon>展开</div
|
|
|
>
|
|
|
@@ -118,7 +116,6 @@
|
|
|
const isExpandAllExist = ref(false);
|
|
|
const expandAll = ref(false);
|
|
|
const options = ref<AlgoItem[]>([]);
|
|
|
- const optionValue = ref<number[]>([]);
|
|
|
|
|
|
const handelSwitchDevMode = () => {
|
|
|
switchDevMode();
|
|
|
@@ -134,13 +131,22 @@
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- const handleAddTags = async () => {
|
|
|
- await addCurIssueTypeList({ algoInfoIdList: optionValue.value });
|
|
|
- getCurOptions();
|
|
|
+ const isOptionInTags = (val) => {
|
|
|
+ if (tags.value) return tags.value.find((item) => item.algoInfoId === val);
|
|
|
+ else return false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleChangeTagStatus = async (val) => {
|
|
|
+ if (tags.value && tags.value.find((item) => item.algoInfoId === val)) {
|
|
|
+ const targetTag = tags.value.find((item) => item.algoInfoId === val);
|
|
|
+ handleDeleteTag(targetTag);
|
|
|
+ } else {
|
|
|
+ await addCurIssueTypeList({ algoInfoIdList: [val] });
|
|
|
+ getCurOptions();
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
const handleDeleteTag = async (tag) => {
|
|
|
- optionValue.value.splice(optionValue.value.indexOf(tag.algoInfoId), 1);
|
|
|
await deleteCurIssueTypeList(tag.id);
|
|
|
getCurOptions();
|
|
|
};
|
|
|
@@ -160,10 +166,6 @@
|
|
|
const getCurOptions = async () => {
|
|
|
await getCurIssueTypeList().then((res) => {
|
|
|
tags.value = res;
|
|
|
- res.forEach((item) => {
|
|
|
- optionValue.value.push(item.algoInfoId);
|
|
|
- optionValue.value = [...new Set(optionValue.value)];
|
|
|
- });
|
|
|
});
|
|
|
};
|
|
|
|
|
|
@@ -240,24 +242,6 @@
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
- .add-options {
|
|
|
- width: 100px;
|
|
|
- height: 28px;
|
|
|
- border-radius: 5px;
|
|
|
- background: rgba(0, 0, 0, 0.05);
|
|
|
- color: rgba(0, 0, 0, 0.5);
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.4s;
|
|
|
- }
|
|
|
-
|
|
|
- .add-options:hover {
|
|
|
- background: rgba(0, 0, 0, 0.15);
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
-
|
|
|
.option-expand {
|
|
|
padding-top: 7px;
|
|
|
color: #1890ff;
|
|
|
@@ -265,8 +249,46 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- :deep(.el-select-dropdown__footer) {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
+ .add-options {
|
|
|
+ width: 100px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.4s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-options:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.15);
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-option {
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chosen-option {
|
|
|
+ position: relative;
|
|
|
+ color: #1890ff;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chosen-option::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 4px;
|
|
|
+ top: 7px;
|
|
|
+ width: 8px;
|
|
|
+ height: 12px;
|
|
|
+ border: solid #1890ff;
|
|
|
+ border-width: 0 2px 2px 0;
|
|
|
+ transform: rotate(45deg);
|
|
|
}
|
|
|
</style>
|