<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="异常提醒">
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">是</el-radio>
|
<el-radio :label="6">否</el-radio>
|
</el-radio-group>
|
</el-form-item></el-col
|
>
|
<el-col :span="12" v-if="intent"
|
><el-form-item label="选项节点">
|
<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" v-if="!intent">
|
<el-col :span="20"
|
><el-form-item label="选项说明">
|
<el-input
|
type="text"
|
placeholder="请输入"
|
v-model="item.targetvalue2"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
</el-row>
|
<el-row :gutter="10" v-if="intent">
|
<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.nextQuestion"
|
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 item.dynamiccruxs"
|
closable
|
effect="dark"
|
:disable-transitions="false"
|
@close="handleClosecrux(crux, item, 1)"
|
>
|
{{ crux }}
|
</el-tag>
|
<el-select
|
v-model="inputValue"
|
v-if="item.inputVisible"
|
@change="handleInputConfirm(item)"
|
filterable
|
remote
|
allow-create
|
reserve-keyword
|
default-first-option
|
:loading="loading"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="items in regular"
|
:key="items.label"
|
:label="items.label"
|
:value="items.label"
|
>
|
</el-option>
|
</el-select>
|
<el-button
|
v-else
|
class="button-new-tag"
|
size="small"
|
@click="showInput(item)"
|
>+ 新增</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 item.nodynamiccruxs"
|
closable
|
effect="dark"
|
:disable-transitions="false"
|
@close="handleClosecrux(crux, item, 2)"
|
>
|
{{ crux }}
|
</el-tag>
|
<el-select
|
v-model="inputValue"
|
v-if="item.noinputVisible"
|
@change="handleInputConfirm(item)"
|
filterable
|
remote
|
allow-create
|
reserve-keyword
|
default-first-option
|
:loading="loading"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="items in noregular"
|
:key="items.value"
|
:label="items.label"
|
:value="items.label"
|
>
|
</el-option>
|
</el-select>
|
<el-button
|
v-else
|
class="button-new-tag"
|
size="small"
|
@click="showInputno(item)"
|
>+ 新增</el-button
|
>
|
</div>
|
</el-form-item>
|
|
<el-row :gutter="10">
|
<el-col :span="16" v-if="intent">
|
<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="intent ? 8 : 22">
|
<div style="text-align: right; padding-right: 10px">
|
<el-button
|
v-if="controlsc"
|
@click="$emit('addoption', item)"
|
type="success"
|
icon="el-icon-circle-plus-outline"
|
circle
|
></el-button>
|
<el-button
|
type="danger"
|
icon="el-icon-delete"
|
circle
|
@click="$emit('deloption', item)"
|
></el-button>
|
<el-button
|
v-if="controlsc"
|
@click="$emit('syioption', item)"
|
type="primary"
|
icon="el-icon-top"
|
circle
|
></el-button>
|
<el-button
|
v-if="controlsc"
|
@click="$emit('xiayioption', item)"
|
type="primary"
|
icon="el-icon-bottom"
|
circle
|
></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: () => [],
|
},
|
controlsc: {
|
type: Boolean,
|
default: true,
|
},
|
intent: {
|
type: Boolean,
|
default: true,
|
},
|
},
|
|
created() {
|
this.regular = store.getters.regular;
|
this.noregular = store.getters.noregular;
|
},
|
|
methods: {
|
// 生成正则
|
generateRegex(row) {
|
let index = this.TargetoptionList.indexOf(row);
|
console.log(index);
|
let regex = "";
|
let regexno = "";
|
let hostregex = "";
|
let hostregexno = "";
|
|
for (
|
let i = 0;
|
i < this.TargetoptionList[index].dynamiccruxs.length;
|
i++
|
) {
|
regex += `${this.TargetoptionList[index].dynamiccruxs[i]}|`;
|
}
|
for (
|
let i = 0;
|
i < this.TargetoptionList[index].nodynamiccruxs.length;
|
i++
|
) {
|
regexno += `${this.TargetoptionList[index].nodynamiccruxs[i]}|`;
|
}
|
regex = regex.slice(0, -1);
|
regexno = regexno.slice(0, -1);
|
if (regexno) {
|
hostregexno = "^(?!.*(?:" + `${regexno}` + ")).*$";
|
} else {
|
hostregexno = "";
|
}
|
hostregex = "(?=.*(?:" + `${regex}` + ")).*$";
|
this.TargetoptionList[index].targetregex = hostregex;
|
this.TargetoptionList[index].targetregex2 = hostregexno;
|
console.log(hostregex, "确定字匹配");
|
console.log(hostregexno, "否定字匹配");
|
this.handleSelectionChange();
|
},
|
// 控制文件
|
handleChange(file, fileList) {
|
this.fileList = fileList.slice(-3);
|
},
|
// 文件超出个数限制时的钩子
|
handleExceed(files, fileList) {
|
this.$message.warning(
|
`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
files.length + fileList.length
|
} 个文件`
|
);
|
},
|
|
handleClosecrux(crux, item, whether) {
|
if (whether == 1) {
|
item.dynamiccruxs.splice(item.dynamiccruxs.indexOf(crux), 1);
|
console.log(1);
|
console.log(item.dynamiccruxs);
|
console.log(item.nodynamiccruxs);
|
} else {
|
console.log(2);
|
item.nodynamiccruxs.splice(item.nodynamiccruxs.indexOf(crux), 1);
|
}
|
this.generateRegex(item);
|
},
|
handleInputConfirm(row) {
|
console.log(this.TargetoptionList, "TargetoptionList");
|
let index = this.TargetoptionList.indexOf(row);
|
console.log(1112);
|
if (this.whether == 1 && this.inputValue) {
|
if (
|
this.TargetoptionList[index].dynamiccruxs.indexOf(this.inputValue) ==
|
-1
|
) {
|
this.TargetoptionList[index].dynamiccruxs.push(this.inputValue);
|
} else {
|
this.$message.error("关键字已存在");
|
}
|
// this.inputVisible = false;
|
this.TargetoptionList[index].inputVisible = false;
|
} else if (this.whether == 2 && this.inputValue) {
|
console.log(this.inputValue);
|
console.log(
|
this.TargetoptionList[index].nodynamiccruxs.indexOf(this.inputValue)
|
);
|
if (
|
this.TargetoptionList[index].nodynamiccruxs.indexOf(
|
this.inputValue
|
) == -1
|
) {
|
this.TargetoptionList[index].nodynamiccruxs.push(this.inputValue);
|
} else {
|
this.$message.error("关键字已存在");
|
}
|
// this.noinputVisible = false;
|
this.TargetoptionList[index].noinputVisible = false;
|
}
|
this.generateRegex(row);
|
|
this.inputValue = "";
|
},
|
showInput(row) {
|
let index = this.TargetoptionList.indexOf(row);
|
// this.TargetoptionList[index].inputVisible = true;
|
this.$set(this.TargetoptionList[index], "inputVisible", true);
|
this.whether = 1;
|
},
|
showInputno(row) {
|
let index = this.TargetoptionList.indexOf(row);
|
// this.TargetoptionList[index].noinputVisible = true;
|
this.$set(this.TargetoptionList[index], "noinputVisible", true);
|
this.whether = 2;
|
},
|
handleSelectionChange(selection) {
|
console.log(this.TargetoptionList);
|
this.$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>
|
