<template>
|
<div>
|
<el-card style="margin: 20px" class="box-card">
|
<el-form
|
:model="baseForm"
|
:rules="bases"
|
ref="baseForm"
|
label-width="100px"
|
class="demo-baseForm"
|
>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="模板名称" prop="extName">
|
<el-input
|
v-model="baseForm.extName"
|
placeholder="请输入"
|
></el-input> </el-form-item
|
></el-col>
|
<el-col :span="12">
|
<el-form-item label="模板分类" prop="groupID">
|
<el-select v-model="baseForm.groupID" placeholder="请选择分类">
|
<el-option
|
v-for="item in deptOptions"
|
:key="item.intertcatid"
|
:label="item.categoryname"
|
:value="item.intertcatid"
|
>
|
</el-option>
|
</el-select> </el-form-item
|
></el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="模板概述" prop="name">
|
<el-input
|
v-model="baseForm.note"
|
placeholder="请输入"
|
></el-input> </el-form-item
|
></el-col>
|
<el-col :span="12">
|
<el-form-item label="是否可用" prop="resource">
|
<el-select v-model="baseForm.isEnable" placeholder="请选择状态">
|
<el-option
|
v-for="item in usable"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select> </el-form-item
|
></el-col>
|
</el-row>
|
</el-form>
|
<div class="presentation">
|
<div class="presentation-left">
|
<div class="leftvlue-jbxx">话术列表</div>
|
<el-divider></el-divider>
|
|
<el-table :data="targetList" :row-class-name="tableRowClassName">
|
<el-table-column
|
label="序号"
|
fixed
|
align="center"
|
key="id"
|
prop="id"
|
/>
|
|
<el-table-column
|
label="问题文本"
|
align="center"
|
key="switchText"
|
width="250"
|
prop="switchText"
|
:show-overflow-tooltip="true"
|
>
|
</el-table-column>
|
|
<el-table-column
|
label="是否可用"
|
align="center"
|
key="isEnable"
|
prop="isEnable"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.isEnable == 1 ? "停用" : "启用" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="最近修改"
|
align="center"
|
key="updateTime"
|
width="250"
|
prop="updateTime"
|
:show-overflow-tooltip="true"
|
>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
align="center"
|
fixed="right"
|
width="200"
|
class-name="small-padding fixed-width"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="medium"
|
type="text"
|
@click="handleUpdate(scope.row, scope.$index)"
|
><span class="button-textxg"
|
><i class="el-icon-edit"></i>修改</span
|
></el-button
|
>
|
|
<el-button
|
size="medium"
|
type="text"
|
@click="handleDelete(scope.row)"
|
><span class="button-textsc"
|
><i class="el-icon-delete"></i>删除</span
|
></el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="presentation-right">
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="100px"
|
class="demo-ruleForm"
|
>
|
<div class="leftvlue-jbxx">话术编辑</div>
|
<el-divider></el-divider>
|
<div style="margin: 15px; margin-top: 50px">
|
<el-form-item label="话术文本" prop="name">
|
<el-input
|
v-model="ruleForm.switchText"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="是否启用" prop="resource">
|
<el-select v-model="ruleForm.isEnable" placeholder="请选择">
|
<el-option
|
v-for="item in usable"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select> </el-form-item
|
></el-col>
|
<el-col :span="12">
|
<el-form-item label="是否为结束语" prop="resource">
|
<el-select v-model="ruleForm.isEnd" placeholder="请选择">
|
<el-option
|
v-for="item in usablend"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select> </el-form-item
|
></el-col>
|
</el-row>
|
<el-form-item label="问题语音" prop="verbaltrickyy">
|
<el-upload
|
class="upload-demo"
|
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-input v-model="indexform.userName" maxlength="30" /> -->
|
</el-form-item>
|
|
<el-form-item label="关键字(含)" prop="desc">
|
<div class="xinz-inf">
|
<el-tag
|
:key="crux"
|
type="success"
|
v-for="crux in ruleForm.dynamiccruxs"
|
closable
|
effect="dark"
|
:disable-transitions="false"
|
@close="handleClosecrux(crux, ruleForm, 1)"
|
>
|
{{ crux }}
|
</el-tag>
|
<el-select
|
v-model="inputValue"
|
v-if="inputVisible"
|
@change="handleInputConfirm(ruleForm)"
|
filterable
|
remote
|
allow-create
|
reserve-keyword
|
default-first-option
|
:loading="loading"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="ruleForms in regular"
|
:key="ruleForms.label"
|
:label="ruleForms.label"
|
:value="ruleForms.label"
|
>
|
</el-option>
|
</el-select>
|
<el-button
|
v-else
|
class="button-new-tag"
|
size="small"
|
@click="showInput(ruleForm)"
|
>+ 新增</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 ruleForm.nodynamiccruxs"
|
closable
|
effect="dark"
|
:disable-transitions="false"
|
@close="handleClosecrux(crux, ruleForm, 2)"
|
>
|
{{ crux }}
|
</el-tag>
|
<el-select
|
v-model="inputValue"
|
v-if="noinputVisible"
|
@change="handleInputConfirm(ruleForm)"
|
filterable
|
remote
|
allow-create
|
reserve-keyword
|
default-first-option
|
:loading="loading"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="ruleForms in noregular"
|
:key="ruleForms.value"
|
:label="ruleForms.label"
|
:value="ruleForms.label"
|
>
|
</el-option>
|
</el-select>
|
<el-button
|
v-else
|
class="button-new-tag"
|
size="small"
|
@click="showInputno(ruleForm)"
|
>+ 新增</el-button
|
>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm('ruleForm')"
|
>保存模板</el-button
|
>
|
<el-button
|
v-if="ruleForm.id"
|
type="primary"
|
plain
|
@click="modification('edit')"
|
>保存话术</el-button
|
>
|
<el-button
|
v-else
|
type="success"
|
plain
|
@click="modification('add')"
|
>新增话术</el-button
|
>
|
<el-button @click="resetForm('ruleForm')">关闭</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import store from "@/store";
|
import {
|
editgeneravaluel,
|
addgeneravaluel,
|
getgeneravaluelinfo,
|
addgeneral,
|
editgeneral,
|
getgeneralinfo,
|
getgeneralclassify,
|
delgeneravaluelinfo,
|
getgeneravaluellist,
|
} from "@/api/AiCentre/index";
|
export default {
|
data() {
|
return {
|
loading: false,
|
id: null,
|
usable: [],
|
index: "",
|
languagelist: [],
|
deptOptions: [],
|
mode: [],
|
pitchon: "",
|
targetList: [],
|
fileList: [
|
{
|
name: "food.jpeg",
|
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
},
|
],
|
usablend: [
|
{
|
value: 0,
|
label: "非结束语",
|
},
|
{
|
value: 1,
|
label: "结束语",
|
},
|
],
|
ruleForm: {
|
dynamiccruxs: [],
|
nodynamiccruxs: [],
|
},
|
baseForm: {
|
extName: "",
|
},
|
rules: {},
|
bases: {},
|
whether: 1, //1为关键词，2为否定关键词
|
inputValue: "",
|
inputVisible: false,
|
noinputVisible: false,
|
loading: false,
|
regular: [],
|
noregular: [],
|
nodynamiccruxs: ["别", "不"],
|
dynamiccruxs: ["好"],
|
};
|
},
|
|
created() {
|
this.id = this.$route.query.id;
|
this.getList();
|
this.usable = store.getters.usablesz;
|
this.languagelist = store.getters.languagelist;
|
this.mode = store.getters.mode;
|
this.regular = store.getters.regular;
|
this.noregular = store.getters.noregular;
|
},
|
|
methods: {
|
getList() {
|
if (this.id) {
|
this.$modal.loading("请稍候...");
|
getgeneralinfo(this.id).then((res) => {
|
if (res.code == 200) {
|
this.baseForm = res.data;
|
}
|
this.$modal.closeLoading();
|
});
|
getgeneravaluellist({ extID: this.id }).then((res) => {
|
if (res.code == 200) {
|
this.targetList = res.rows;
|
}
|
this.$modal.closeLoading();
|
});
|
}
|
getgeneralclassify({}).then((res) => {
|
this.deptOptions = res.rows;
|
console.log(res);
|
});
|
},
|
/** 新增按钮操作 */
|
handleAdd() {},
|
/** 修改按钮操作 */
|
handleUpdate(row, index) {
|
this.pitchon = row.switchText;
|
this.ruleForm = row;
|
this.index = index;
|
},
|
// 删除
|
handleDelete(item) {
|
this.$modal
|
.confirm("是否确认删除该话术项？")
|
.then((res) => {
|
if (item.id) {
|
delgeneravaluelinfo(item.id).then((res) => {
|
this.$modal.msgSuccess("删除成功");
|
});
|
}
|
this.targetList = this.targetList.filter((obj) => obj !== item);
|
})
|
.catch(() => {});
|
},
|
// 保存主表
|
submitForm() {
|
if (this.baseForm.id) {
|
editgeneral(this.baseForm).then((res) => {
|
if (res.code == 200) {
|
this.$modal.msgSuccess("修改成功");
|
this.savetalk();
|
}
|
});
|
} else {
|
addgeneral(this.baseForm).then((res) => {
|
if (res.code == 200) {
|
this.$modal.msgSuccess("新增成功");
|
this.baseForm.id = res.data.id;
|
this.id = res.data.id;
|
this.savetalk();
|
}
|
});
|
}
|
},
|
// 保存话术
|
savetalk() {
|
this.targetList.forEach((obj) => {
|
if (obj.id) {
|
editgeneravaluel(obj).then((res) => {
|
this.getList();
|
});
|
} else {
|
obj.extID = this.baseForm.id;
|
addgeneravaluel(obj).then((res) => {
|
this.getList();
|
});
|
}
|
});
|
},
|
modification(type) {
|
if (type == "add") {
|
console.log(this.ruleForm, "ruleForm");
|
this.targetList.push(this.ruleForm);
|
} else {
|
this.targetList[this.index] = this.ruleForm;
|
}
|
this.ruleForm = {};
|
},
|
// 关闭
|
resetForm() {
|
this.$confirm("即将退出页面, 请确认数据是否保存?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.$router.go(-1);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
// 文件----------------------
|
// 控制文件
|
handleChange(file, fileList) {
|
this.fileList = fileList.slice(-3);
|
},
|
// 文件超出个数限制时的钩子
|
handleExceed(files, fileList) {
|
this.$message.warning(
|
`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
files.length + fileList.length
|
} 个文件`
|
);
|
},
|
tableRowClassName({ row, rowIndex }) {
|
if (row.switchText == this.pitchon) {
|
return "warning-row";
|
}
|
return "";
|
},
|
// 正则-----------------
|
// 生成正则
|
generateRegex(row) {
|
let regex = "";
|
let regexno = "";
|
let hostregex = "";
|
let hostregexno = "";
|
|
for (let i = 0; i < this.ruleForm.dynamiccruxs.length; i++) {
|
regex += `${this.ruleForm.dynamiccruxs[i]}|`;
|
}
|
for (let i = 0; i < this.ruleForm.nodynamiccruxs.length; i++) {
|
regexno += `${this.ruleForm.nodynamiccruxs[i]}|`;
|
}
|
regex = regex.slice(0, -1);
|
regexno = regexno.slice(0, -1);
|
hostregex = "(?=.*(?:" + `${regex}` + ")).*$";
|
hostregexno = "^(?!.(?:" + `${regexno}` + ")).*$";
|
this.ruleForm.selfRegex = hostregex;
|
this.ruleForm.selfRegex2 = hostregexno;
|
console.log(hostregex, "确定字匹配");
|
console.log(hostregexno, "否定字匹配");
|
},
|
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) {
|
// let index = this.TargetoptionList.indexOf(row);
|
console.log(this.ruleForm.dynamiccruxs);
|
console.log(this.ruleForm.nodynamiccruxs);
|
if (this.whether == 1 && this.inputValue) {
|
console.log(1);
|
if (this.ruleForm.dynamiccruxs.indexOf(this.inputValue) == -1) {
|
this.ruleForm.dynamiccruxs.push(this.inputValue);
|
console.log(2);
|
} else {
|
this.$message.error("关键字已存在");
|
}
|
// this.inputVisible = false;
|
this.inputVisible = false;
|
} else if (this.whether == 2 && this.inputValue) {
|
console.log(this.ruleForm.nodynamiccruxs.indexOf(this.inputValue));
|
if (this.ruleForm.nodynamiccruxs.indexOf(this.inputValue) == -1) {
|
this.ruleForm.nodynamiccruxs.push(this.inputValue);
|
} else {
|
this.$message.error("关键字已存在");
|
}
|
// this.noinputVisible = false;
|
this.noinputVisible = false;
|
}
|
this.generateRegex(row);
|
|
this.inputValue = "";
|
},
|
showInput(row) {
|
// let index = this.TargetoptionList.indexOf(row);
|
this.inputVisible = true;
|
// this.$set(this.ruleForm, "inputVisible", true);
|
this.whether = 1;
|
},
|
showInputno(row) {
|
// let index = this.TargetoptionList.indexOf(row);
|
this.noinputVisible = true;
|
// this.$set(this.ruleForm, "noinputVisible", true);
|
this.whether = 2;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.elcardiv {
|
padding: 10px;
|
.leftvlue-jbxx {
|
font-size: 24px;
|
border-left: 5px solid #5788FE;
|
padding-left: 5px;
|
margin: 15px 0;
|
}
|
}
|
.presentation {
|
margin: 20px 0;
|
display: flex;
|
.presentation-left {
|
width: 60%;
|
// height: 500px;
|
}
|
.presentation-right {
|
width: 40%;
|
max-height: 688px;
|
padding: 0 20px;
|
font-size: 18px;
|
overflow: auto;
|
}
|
.leftvlue-jbxx {
|
font-size: 24px;
|
border-left: 5px solid #5788FE;
|
padding-left: 5px;
|
margin: 15px 0;
|
}
|
}
|
.button-textxg {
|
color: rgb(35, 81, 233);
|
}
|
.button-textsc {
|
color: rgb(235, 23, 23);
|
}
|
.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;
|
}
|
::v-deep.el-table .warning-row {
|
background: rgb(193, 208, 250);
|
}
|
</style>
|
