218 lines
8.0 KiB
Vue
218 lines
8.0 KiB
Vue
<template>
|
||
<div class="container" style="overflow: auto;">
|
||
<el-page-header @back="$router.push('/manage')">
|
||
<template #content>
|
||
<span class="text-large font-600 mr-3"> {{ editing.name }} ({{ editing.id }}) </span>
|
||
</template>
|
||
</el-page-header>
|
||
<div class="colbox" style="margin-top: 20px;">
|
||
<div class="rowbox">
|
||
<div class="card" style="margin-bottom: 20px;">
|
||
<div class="title">添加单词</div>
|
||
<el-input ref="input1" autofocus @change="focusnext($refs.input2)" v-model="new_word.word"></el-input>
|
||
<div class="colbox">
|
||
<el-text class="mx-1" style="width: 60px;">翻译:</el-text>
|
||
<el-input ref="input2" @change="focusnext($refs.input3)" v-model="new_word.trans"></el-input>
|
||
</div>
|
||
<div class="colbox">
|
||
<el-text class="mx-1" style="width: 80px;">词性：</el-text>
|
||
<el-select ref="input3" v-model="new_word.type" class="m-2" placeholder="Select">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<el-button @click="add_word()" type="primary">添加</el-button>
|
||
</div>
|
||
<div class="card">
|
||
<div class="title">更改名称</div>
|
||
<div class="colbox">
|
||
<el-text class="mx-1" style="width: 60px;">新名称:</el-text>
|
||
<el-input v-model="new_name"></el-input>
|
||
</div>
|
||
<el-button @click="change_name()" type="primary">更改名称</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;" class="card">
|
||
<el-table :data="table" style="max-height: 550px;overflow: auto;border-radius: 10px;">
|
||
<el-table-column type="index" />
|
||
<el-table-column prop="word" label="单词" />
|
||
<el-table-column prop="type" label="词性" />
|
||
<el-table-column prop="trans" label="翻译" />
|
||
<el-table-column width="100px" fixed="right" label="操作">
|
||
<template #default="scope">
|
||
<div style="display: flex;flex-direction: row;justify-content: space-around;">
|
||
<box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
|
||
@click="del_word(scope.$index)"></box-icon>
|
||
<box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
|
||
@click="edit_word(scope.$index)"></box-icon>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog v-model="word_editing">
|
||
<div class="title">修改单词</div>
|
||
<el-input v-model="editing_word.word"></el-input>
|
||
<div class="colbox">
|
||
<el-text class="mx-1" style="width: 60px;">翻译:</el-text>
|
||
<el-input v-model="editing_word.trans"></el-input>
|
||
</div>
|
||
<div class="colbox">
|
||
<el-text class="mx-1" style="width: 80px;">词性：</el-text>
|
||
<el-select v-model="editing_word.type" class="m-2" placeholder="Select">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<el-button @click="save_word" type="primary">更改</el-button>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { ElMessage } from 'element-plus';
|
||
|
||
export default {
|
||
name: "NoteEditor",
|
||
data() {
|
||
return {
|
||
editing: window.editing.set,
|
||
editingClass:window.editing.set_class_name,
|
||
wordsets: window.wordsets,
|
||
new_word: {
|
||
word: "",
|
||
trans: "",
|
||
type: "adj.",
|
||
},
|
||
editing_word: {
|
||
word: "",
|
||
trans: "",
|
||
type: "adj.",
|
||
index: 0,
|
||
},
|
||
options: [{ label: "adjective(adj.)", value: "adj." }, { label: "verb(v.)", value: "v." }, { label: "noun(n.)", value: "n." }, { label: "adverb(adv.)", value: "adv." }, { label: "prepositions(prep.)", value: "prep." }, { label: "phrase(phr.)", value: "phr." },],
|
||
table: [],
|
||
word_editing: false,
|
||
new_name:"",
|
||
}
|
||
},
|
||
methods: {
|
||
focusnext(node) {
|
||
node.focus();
|
||
},
|
||
has_word(word) {
|
||
for (let i of this.table) {
|
||
if (i.word === word) return true;
|
||
}
|
||
return false;
|
||
},
|
||
add_word() {
|
||
if (this.has_word(this.new_word.word)) {
|
||
ElMessage({
|
||
message: `单词 ${this.new_word.word} 已存在`,
|
||
type: 'error',
|
||
});
|
||
return;
|
||
}
|
||
this.table.push(Object.assign({}, this.new_word));
|
||
localStorage.setItem(this.editing.id, JSON.stringify(this.table));
|
||
ElMessage({
|
||
message: `已添加 ${this.new_word.word} (${this.new_word.type})`,
|
||
type: 'success',
|
||
});
|
||
this.new_word.word = "";
|
||
this.new_word.trans = "";
|
||
this.$refs.input1.focus();
|
||
},
|
||
edit_word(index) {
|
||
this.editing_word = Object.assign({}, this.table[index]);
|
||
this.editing_word.index = index;
|
||
this.word_editing = true;
|
||
return;
|
||
},
|
||
save_word() {
|
||
if (this.editing_word.word != this.table[this.editing_word.index].word) {
|
||
if (this.has_word(this.editing_word.word)) {
|
||
ElMessage({
|
||
message: `单词 ${this.new_word.word} 已存在`,
|
||
type: 'error',
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
this.table[this.editing_word.index] = {
|
||
word: this.editing_word.word,
|
||
type: this.editing_word.type,
|
||
trans: this.editing_word.trans,
|
||
}
|
||
localStorage.setItem(this.editing.id, JSON.stringify(this.table));
|
||
ElMessage({
|
||
message: `已保存更改`,
|
||
type: 'success',
|
||
});
|
||
this.word_editing = false;
|
||
},
|
||
change_name() {
|
||
let old_name = this.editing.name;
|
||
this.editing.name = this.new_name;
|
||
localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
|
||
ElMessage({
|
||
message: `已更改 ${old_name} 为 ${this.new_name}`,
|
||
type: 'success',
|
||
});
|
||
return;
|
||
},
|
||
del_word(index) {
|
||
let word = this.table[index].word.concat();
|
||
this.table.splice(index, 1);
|
||
localStorage.setItem(this.editing.id, JSON.stringify(this.table));
|
||
ElMessage({
|
||
message: `已删除 ${word}`,
|
||
type: 'warning',
|
||
});
|
||
},
|
||
|
||
},
|
||
created() {
|
||
this.table = JSON.parse(localStorage.getItem(this.editing.id));
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
#main-container {
|
||
height: 87%;
|
||
}
|
||
|
||
.title {
|
||
font-weight: 800;
|
||
color: var(--text-color);
|
||
font-size: 35px;
|
||
flex-grow: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
min-height: 60px;
|
||
}
|
||
|
||
|
||
.card div {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
#new div {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
#sets-container {
|
||
background-color: var(--bg-color);
|
||
padding: 5px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
|
||
.el-collapse {
|
||
--el-collapse-header-bg-color: #FFFFFF00;
|
||
--el-collapse-content-bg-color: #FFFFFF00;
|
||
--el-collapse-header-font-size: 18px;
|
||
}
|
||
</style> |