|
|
@@ -1,22 +1,186 @@
|
|
|
<template>
|
|
|
<ModuleBase :type="data.type">
|
|
|
<template #content>
|
|
|
- <div></div>
|
|
|
+ <div class="tag-edit">
|
|
|
+ <el-tag
|
|
|
+ v-for="(tag, i) in data.dynamicTags"
|
|
|
+ :key="i"
|
|
|
+ closable
|
|
|
+ :style="{ color: tag.color }"
|
|
|
+ @close="handleClose(i)"
|
|
|
+ >
|
|
|
+ {{ tag.text }}
|
|
|
+ </el-tag>
|
|
|
+ <el-input
|
|
|
+ v-if="inputVisible"
|
|
|
+ ref="saveTagInput"
|
|
|
+ v-model="inputValue"
|
|
|
+ class="input-new-tag"
|
|
|
+ @keyup.enter.native="handleInputConfirm"
|
|
|
+ @blur="handleInputConfirm"
|
|
|
+ />
|
|
|
+ <el-button v-else class="button-new-tag" @click="showInput">+ 添加标签</el-button>
|
|
|
+ </div>
|
|
|
+ <hr style="margin: 16px 0; border-top: 1px solid #ededed" />
|
|
|
+ <div class="tag-manager">
|
|
|
+ <div class="tag-manager-box">
|
|
|
+ <span class="tag-manager-title">常用标签</span>
|
|
|
+ <SvgIcon icon-class="setup" size="14" />
|
|
|
+ <span class="tag-manager-text" @click="editCommonTags()">管理</span>
|
|
|
+ </div>
|
|
|
+ <div class="tag-manager-common tag-edit">
|
|
|
+ <el-tag
|
|
|
+ v-for="(tag, i) in commonTags"
|
|
|
+ :key="i"
|
|
|
+ effect="plain"
|
|
|
+ size="medium"
|
|
|
+ :closable="closable"
|
|
|
+ style="cursor: pointer"
|
|
|
+ @close="handleCloseCommonTag(i)"
|
|
|
+ @click="viewToDynamicTags(i)"
|
|
|
+ >
|
|
|
+ {{ tag.text }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</ModuleBase>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { getLabelData } from '@/views/book/courseware/data/label';
|
|
|
+import { getLabelData, labelColorList } from '@/views/book/courseware/data/label';
|
|
|
import ModuleMixin from '../../common/ModuleMixin';
|
|
|
export default {
|
|
|
name: 'LabelPage',
|
|
|
mixins: [ModuleMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
+ labelColorList,
|
|
|
data: getLabelData(),
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ closable: false,
|
|
|
+ commonTags: [], // 常用标签
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ const storedData = localStorage.getItem('commonTags');
|
|
|
+ if (storedData) {
|
|
|
+ this.commonTags = JSON.parse(storedData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 随机显示颜色
|
|
|
+ getRandomColor() {
|
|
|
+ let randomIndex = Math.floor(Math.random() * (this.labelColorList.length - 1)) + 1;
|
|
|
+ return this.labelColorList[randomIndex].value;
|
|
|
+ },
|
|
|
+ // 删除标签
|
|
|
+ handleClose(i) {
|
|
|
+ this.data.dynamicTags.splice(i, 1);
|
|
|
+ },
|
|
|
+ // 显示编辑标签图标
|
|
|
+ editCommonTags() {
|
|
|
+ this.closable = !this.closable;
|
|
|
+ },
|
|
|
+ // 删除常用标签
|
|
|
+ handleCloseCommonTag(i) {
|
|
|
+ this.commonTags.splice(i, 1);
|
|
|
+ this.saveToLocalStorage();
|
|
|
+ },
|
|
|
+ // 显示新增标签
|
|
|
+ showInput() {
|
|
|
+ this.inputVisible = true;
|
|
|
+ this.$nextTick((_) => {
|
|
|
+ this.$refs.saveTagInput.$refs.input.focus();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 新增标签
|
|
|
+ handleInputConfirm() {
|
|
|
+ let inputValue = this.inputValue;
|
|
|
+ let label_color = this.data.property.label_color;
|
|
|
+ if (label_color === 'random') label_color = this.getRandomColor();
|
|
|
+ if (inputValue) {
|
|
|
+ this.data.dynamicTags.push({
|
|
|
+ text: inputValue,
|
|
|
+ color: label_color,
|
|
|
+ });
|
|
|
+ this.commonTags.push({
|
|
|
+ text: inputValue,
|
|
|
+ color: label_color,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.inputVisible = false;
|
|
|
+ this.inputValue = '';
|
|
|
+ this.saveToLocalStorage();
|
|
|
+ },
|
|
|
+ // 点击常用标签显示到动态标签里
|
|
|
+ viewToDynamicTags(index) {
|
|
|
+ this.data.dynamicTags.push(this.commonTags[index]);
|
|
|
+ },
|
|
|
+ // 常用标签存储
|
|
|
+ saveToLocalStorage() {
|
|
|
+ // 将数据保存到localStorage中
|
|
|
+ localStorage.setItem('commonTags', JSON.stringify(this.commonTags));
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tag-edit {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ :deep .el-tag {
|
|
|
+ height: 32px;
|
|
|
+ padding: 0 10px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: var(--color1);
|
|
|
+ background-color: #fff;
|
|
|
+ border-color: var(--color1);
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ .el-tag__close:hover {
|
|
|
+ // color: #fff;
|
|
|
+ background-color: #ddd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tag__close {
|
|
|
+ color: var(--color1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-new-tag {
|
|
|
+ height: 32px;
|
|
|
+ background-color: #f2f3f3;
|
|
|
+ border: 1px dashed #c9cdd4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-new-tag {
|
|
|
+ width: 90px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tag-manager {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 10px;
|
|
|
+
|
|
|
+ .tag-manager-box {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 4px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .tag-manager-title {
|
|
|
+ margin-right: 6px;
|
|
|
+ color: rgba(0, 0, 0, 65%);
|
|
|
+ cursor: text;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zq