<template>
|
<div>
|
<div class="topicxq" v-for="item in TargetoptionList">
|
<el-row :gutter="10">
|
<el-col :span="12"
|
><el-form-item label="选项名">
|
<el-input
|
type="text"
|
placeholder="请输入"
|
v-model="item.targetvalue"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
<el-col :span="12"
|
><el-form-item label="节点ID">
|
<el-input
|
type="text"
|
placeholder="请输入节点"
|
v-model="item.targetid"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
</el-row>
|
<el-row :gutter="10">
|
<el-col :span="12"
|
><el-form-item label="处理">
|
<el-input
|
type="text"
|
placeholder="(默认)无声"
|
v-model="item.text"
|
maxlength="10"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
<el-col :span="12"
|
><el-form-item label="选中跳转(缺)">
|
<el-input
|
type="text"
|
placeholder="请输入题目节点"
|
v-model="item.jump"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
</el-row>
|
<el-form-item label="关键字(含)" prop="desc">
|
<div class="xinz-inf">
|
<el-tag
|
:key="crux"
|
type="success"
|
v-for="crux in dynamiccruxs"
|
closable
|
effect="dark"
|
:disable-transitions="false"
|
@close="handleClosecrux(crux)"
|
>
|
{{ crux }}
|
</el-tag>
|
<el-select
|
v-model="inputValue"
|
v-if="inputVisible"
|
@change="handleInputConfirm"
|
filterable
|
remote
|
allow-create
|
reserve-keyword
|
default-first-option
|
:loading="loading"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in regular"
|
:key="item.label"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
<el-button
|
v-else
|
class="button-new-tag"
|
size="small"
|
@click="showInput"
|
>+ 新增</el-button
|
>
|
</div>
|
</el-form-item>
|
<el-form-item label="关键字(非)" prop="desc">
|
<div class="xinz-inf">
|
<el-tag
|
:key="crux"
|
type="warning"
|
v-for="crux in nodynamiccruxs"
|
closable
|
effect="dark"
|
:disable-transitions="false"
|
@close="handleClosecrux(crux)"
|
>
|
{{ crux }}
|
</el-tag>
|
<el-select
|
v-model="inputValue"
|
v-if="noinputVisible"
|
@change="handleInputConfirm"
|
filterable
|
remote
|
allow-create
|
reserve-keyword
|
default-first-option
|
:loading="loading"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in noregular"
|
:key="item.value"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
<el-button
|
v-else
|
class="button-new-tag"
|
size="small"
|
@click="showInputno"
|
>+ 新增</el-button
|
>
|
</div>
|
</el-form-item>
|
|
<el-row :gutter="10">
|
<el-col :span="16">
|
<el-form-item label="语音文件">
|
<el-upload
|
class="upload-demo"
|
style="display: flex"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:on-change="handleChange"
|
:file-list="fileList"
|
:limit="1"
|
:on-exceed="handleExceed"
|
>
|
<el-button size="small" type="primary">点击上传</el-button>
|
</el-upload>
|
</el-form-item></el-col
|
>
|
<el-col :span="8">
|
<div style="text-align: right; padding-right: 10px">
|
<el-button type="danger" @click="deloption(item)" round
|
>删除</el-button
|
>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import store from "@/store";
|
|
export default {
|
data() {
|
return {
|
zz1: "^(?!.不)(.(我|你|他|可以|是|好|知道|没错)+.*)$",
|
zz2: "^(?!.不)(?=.?(我|你|他|可以|是|好|知道|没错)).*$",
|
fileList: [
|
{
|
name: "food.jpeg",
|
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
},
|
],
|
whether: 1, //1为关键词，2为否定关键词
|
inputValue: "",
|
inputVisible: false,
|
noinputVisible: false,
|
loading: false,
|
regular: [],
|
noregular: [],
|
nodynamiccruxs: ["别"],
|
dynamiccruxs: ["好"],
|
};
|
},
|
props: {
|
TargetoptionList: {
|
type: Array,
|
required: true,
|
default: () => [],
|
},
|
},
|
|
created() {
|
this.regular = store.getters.regular;
|
this.noregular = store.getters.noregular;
|
},
|
|
methods: {
|
// 生成正则
|
generateRegex() {
|
let regex = "";
|
let regexno = "";
|
let hostregex = "";
|
|
for (let i = 0; i < this.dynamiccruxs.length; i++) {
|
regex += `${this.dynamiccruxs[i]}|`;
|
}
|
for (let i = 0; i < this.nodynamiccruxs.length; i++) {
|
regexno += `${this.nodynamiccruxs[i]}|`;
|
}
|
regex = regex.slice(0, -1);
|
regexno = regexno.slice(0, -1);
|
|
hostregex = "^(?!." + `${regexno}` + ")(.(" + `${regex}` + ")+.*)$";
|
console.log(hostregex);
|
},
|
// 控制文件
|
handleChange(file, fileList) {
|
this.fileList = fileList.slice(-3);
|
},
|
// 文件超出个数限制时的钩子
|
handleExceed(files, fileList) {
|
this.$message.warning(
|
`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
files.length + fileList.length
|
} 个文件`
|
);
|
},
|
|
handleClosecrux(crux) {
|
if (this.whether == 1) {
|
this.dynamiccruxs.splice(this.dynamiccruxs.indexOf(crux), 1);
|
} else {
|
this.nodynamiccruxs.splice(this.nodynamiccruxs.indexOf(crux), 1);
|
}
|
this.generateRegex();
|
},
|
handleInputConfirm() {
|
if (this.whether == 1 && this.inputValue) {
|
if (this.dynamiccruxs.indexOf(this.inputValue) == -1) {
|
this.dynamiccruxs.push(this.inputValue);
|
} else {
|
this.$message.error("关键字已存在");
|
}
|
this.inputVisible = false;
|
} else if (this.whether == 2 && this.inputValue) {
|
console.log(this.inputValue);
|
console.log(this.nodynamiccruxs.indexOf(this.inputValue));
|
if (this.nodynamiccruxs.indexOf(this.inputValue) == -1) {
|
this.nodynamiccruxs.push(this.inputValue);
|
} else {
|
this.$message.error("关键字已存在");
|
}
|
this.noinputVisible = false;
|
}
|
this.generateRegex();
|
|
this.inputValue = "";
|
},
|
showInput() {
|
this.inputVisible = true;
|
this.whether = 1;
|
},
|
showInputno() {
|
this.noinputVisible = true;
|
this.whether = 2;
|
console.log(2);
|
},
|
handleSelectionChange(selection) {
|
$emit("handleSelectionChange", selection);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.topicxq {
|
background-color: #e2f5fc;
|
border-radius: 4px;
|
margin-top: 10px;
|
padding: 10px;
|
}
|
|
.el-tag + .el-tag {
|
margin-left: 10px;
|
}
|
.button-new-tag {
|
margin-left: 10px;
|
height: 32px;
|
line-height: 30px;
|
padding-top: 0;
|
padding-bottom: 0;
|
}
|
.input-new-tag {
|
width: 90px;
|
margin-left: 10px;
|
vertical-align: bottom;
|
}
|
</style>
|
