UI Improvements

This commit is contained in:
Peng-YM
2020-09-03 10:23:50 +08:00
parent 80294618fb
commit 1c06bd8869
11 changed files with 193 additions and 74 deletions

View File

@@ -0,0 +1,75 @@
<template>
<v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title>
<v-icon left color="primary">flag</v-icon>
国旗
<v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)">
<v-icon>keyboard_arrow_up</v-icon>
</v-btn>
<v-btn icon @click="$emit('down', idx)">
<v-icon>keyboard_arrow_down</v-icon>
</v-btn>
<v-btn icon @click="$emit('deleteProcess', idx)">
<v-icon color="error">mdi-delete</v-icon>
</v-btn>
<v-dialog>
<template #activator="{on}">
<v-btn icon v-on="on">
<v-icon>help</v-icon>
</v-btn>
</template>
<v-card>
<v-card-title class="headline">
国旗
</v-card-title>
<v-card-text>
添加或者删除节点国旗
</v-card-text>
</v-card>
</v-dialog>
</v-card-title>
<v-card-text>
工作模式
<v-radio-group v-model="mode">
<v-row>
<v-col>
<v-radio label="添加" value="ADD"/>
</v-col>
<v-col>
<v-radio label="删除" value="REMOVE"/>
</v-col>
</v-row>
</v-radio-group>
</v-card-text>
</v-card>
</template>
<script>
export default {
props: ["args"],
data: function () {
return {
idx: this.$vnode.key,
mode: "DEFAULT"
}
},
created() {
if (typeof this.args !== 'undefined')
this.mode = this.args === true ? "ADD" : "REMOVE";
},
watch: {
mode() {
this.$emit("dataChanged", {
idx: this.idx,
args: this.mode === "ADD"
})
}
}
}
</script>
<style scoped>
</style>

View File

@@ -38,6 +38,7 @@
v-for="(keyword, idx) in keywords"
:key="idx"
@click:close="remove(idx)"
@click="edit(idx)"
>
{{ keyword }}
</v-chip>
@@ -76,6 +77,10 @@ export default {
this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空!");
}
},
edit(idx) {
this.form.keyword = this.keywords[idx];
this.remove(idx);
},
remove(idx) {
this.keywords.splice(idx, 1);
},

View File

@@ -49,6 +49,7 @@
v-for="(keyword, idx) in keywords"
:key="idx"
@click:close="remove(idx)"
@click="edit(idx)"
>
{{ keyword }}
</v-chip>
@@ -87,6 +88,10 @@ export default {
this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空!");
}
},
edit(idx) {
this.form.keyword = this.keywords[idx];
this.remove(idx);
},
remove(idx) {
this.keywords.splice(idx, 1);
},

View File

@@ -38,6 +38,7 @@
v-for="(chip, idx) in chips"
:key="idx"
@click:close="remove(idx)"
@click="edit(idx)"
>
{{ chip }}
</v-chip>
@@ -84,16 +85,16 @@ export default {
chips() {
return this.keywords.map(k => {
const {old, now} = k;
return `${old}${now}`;
return `${old}${now.length === 0 ? "∅" : now}`;
});
}
},
methods: {
add() {
if (this.form.keyword && this.form.replace) {
if (this.form.keyword) {
this.keywords.push({
old: this.form.keyword,
now: this.form.replace
now: this.form.replace || ""
});
this.form.keyword = "";
this.form.replace = "";
@@ -101,6 +102,11 @@ export default {
this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空!");
}
},
edit(idx) {
this.form.keyword = this.keywords[idx].old;
this.form.replace = this.keywords[idx].now;
this.remove(idx);
},
remove(idx) {
this.keywords.splice(idx, 1);
},

View File

@@ -41,6 +41,7 @@
v-for="(regex, idx) in regexps"
:key="idx"
@click:close="remove(idx)"
@click="edit(idx)"
>
{{ regex }}
</v-chip>
@@ -79,6 +80,10 @@ export default {
this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空!");
}
},
edit(idx) {
this.form.regex = this.regexps[idx];
this.remove(idx);
},
remove(idx) {
this.regexps.splice(idx, 1);
},

View File

@@ -53,6 +53,7 @@
v-for="(regex, idx) in regexps"
:key="idx"
@click:close="remove(idx)"
@click="edit(idx)"
>
{{ regex }}
</v-chip>
@@ -91,6 +92,10 @@ export default {
this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空!");
}
},
edit(idx) {
this.form.regex = this.regexps[idx];
this.remove(idx);
},
remove(idx) {
this.regexps.splice(idx, 1);
},

View File

@@ -38,6 +38,7 @@
v-for="(chip, idx) in chips"
:key="idx"
@click:close="remove(idx)"
@click="edit(idx)"
>
{{ chip }}
</v-chip>
@@ -45,7 +46,7 @@
<v-row>
<v-col>
<v-text-field
placeholder="关键词"
placeholder="正则表达式"
solo
v-model="form.regex"
/>
@@ -84,23 +85,28 @@ export default {
chips() {
return this.regexps.map(k => {
const {expr, now} = k;
return `${expr}${now}`;
return `${expr}${now.length === 0 ? "∅" : now}`;
});
}
},
methods: {
add() {
if (this.form.regex && this.form.replace) {
if (this.form.regex) {
this.regexps.push({
expr: this.form.regex,
now: this.form.replace
now: this.form.replace || ""
});
this.form.regex = "";
this.form.replace = "";
} else {
this.$store.commit("SET_ERROR_MESSAGE", "关键词不能为空!");
this.$store.commit("SET_ERROR_MESSAGE", "正则表达式不能为空!");
}
},
edit(idx) {
this.form.regex = this.regexps[idx].expr;
this.form.replace = this.regexps[idx].now;
this.remove(idx);
},
remove(idx) {
this.regexps.splice(idx, 1);
},