zkPCproject/src/views/Template/taboo.vue

<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" style="margin-top: 5px">
        <div
          class="label"
          style="color: #32363d; font-weight: 400"
          v-if="orgType != 3"
        >
          项目选择：
        </div>
        <div v-if="orgType != 3">
          <el-select
            v-model="houseId"
            @change="houseChange"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="label">敏感词：</div>
        <div>
          <el-input
            v-model="words"
            placeholder="敏感词"
            maxlength="8"
            clearable
          ></el-input>
        </div>
        <div style="margin-left: 20px">
          <el-button type="primary" @click="screening()">筛选</el-button>
        </div>
        <div
          style="margin-left: auto; margin-right: 10px"
          v-if="tem_tab_downLoad"
        >
          <el-button v-if="tem_tab_add" @click="editorinfo()" type="primary"
            >新增</el-button
          >
          <el-button @click="downLoad" icon="el-icon-download">导出</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :show-column.sync="showColumn"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template slot-scope="{ row }" slot="menu">
          <el-button v-if="tem_tab_edit" type="text" @click="bianji(row)"
            >编辑</el-button>
          <el-button v-if="tem_tab_del" type="text" @click="del(row)">删除</el-button>
          <el-button type="text" @click="editFun(row.id)">模型匹配</el-button>
        </template>
      </avue-crud>
    </div>
    <el-dialog
      :title="editFlag ? '编辑' : '新增'"
      :center="true"
      width="600px"
      :visible.sync="dialogVisible"
      @close="$refs.ruleForm.resetFields()"
    >
      <el-form
        :model="ruleForm"
        label-position="labelPosition"
        :rules="ruleser"
        ref="ruleForm"
        label-width="80px"
        style="width: 100%; margin: 0 auto"
      >
        <el-form-item label="敏感词" prop="words">
          <el-input
            v-model="ruleForm.words"
            placeholder="敏感词"
            maxlength="8"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="场景描述" prop="sceneDesc">
          <el-input
            type="textarea"
            v-model="ruleForm.sceneDesc"
            placeholder="敏感词"
            maxlength="100"
            show-word-limit
            clearable
          ></el-input>
          <div>增加场景描述有利于标签命中，场景越丰富触达越精准；例如：送家具  ，场景：现在买房我们送家具；</div>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="
          border-top: 1px solid #eee;
          padding-top: 20px;
          display: flex;
          justify-content: end;">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loadingFlag" @click="editor()">保存</el-button >
      </div>
    </el-dialog>
    <el-dialog
					title="编辑模型"
					@open="openModel"
					:close-on-click-modal="false"
					:visible.sync="modelVisible"
	>
		<el-dialog
						title="匹配规则"
						:visible.sync="innerVisible"
						append-to-body>
			<div style="max-height: 430px;overflow: auto">
				<p><b>匹配距离</b>：关键字匹配字数距离，主要针对near/after/w-  生效，w- 的字数统计从挖掘话术后，客户的第一句话开始统计；</p>
				<p style="padding-left: 15px">例如：设置为10，面积  after 140</br>
					命中话术："想买一个面积在140平的"</br>
					超出10个字，有关键字不命中话术参考：“房屋面积啊，你们这边有多大的，有没有140平左右的”；</p>
				<p><b>or（或）</b>：多个关键词，匹配上1个就行</p>
				<p style="padding-left: 15px">例如标签：自住</br>
					匹配模型：自己住 or 给自己</br>
					命中话术：我们自己住/给自己买的</p>
				<p><b>and not（非）</b>：排除反面意思</p>
				<p style="padding-left: 15px">例如：北京户口，</br>
					匹配模型：是北京户口 and not 不是北京户口</br>
					命中话术：我是北京户口；</br>
					反面话术：我不是北京户口</p>
				<p><b>near （ 临近）</b>：1个关键词前后一定范围出现过另一个关键词就算命中，有距离限制</p>
				<p style="padding-left: 15px">例如标签：购房预算 140w</br>
					匹配模型：预算  near 140</br>
					命中话术：我的预算是140w或大概140w的购房预算</p>
				<p><b>after（后面）</b>：一段文本出现2个关键词，并且按照先后的顺序即算命中，有距离限制</p>
				<p style="padding-left: 15px">例如标签：意向面积  140平</br>
					匹配模型： 面积  after  140   ，140在面积后面才算生效；</br>
					命中话术：想买一个面积在140平的；</p>
				<p><b>answer（挖掘话术业务）</b>：顾问执行了挖掘话术，客户回答结果，有距离限制，从客户话术文本开始</p>
				<p style="padding-left: 15px">例如标签：北京户口</br>
					匹配模型：（w-是 or w-有） and not  （w-不是 or w-没有）</br>
					命中话术：销售：你有北京户口吗？</br>
					客户：有的；</p>
				<p><b>-n（命中距离）</b>：near/after-n ,单个near/after的匹配距离，n大于0，小于500</p>
				<p style="padding-left: 15px">例如 ：面积  after-10  140</br>
					10个字内，命中话术参考："想买一个面积在140平的"</br>
					超出10个字，有关键字不命中话术参考：“房屋面积啊，你们这边有多大的，有没有140平左右的”；</p>
				<p><b>注意</b>：-n  与 near/after/answer 之间<b>不能有空格</b>；</p></br>
				<p><b>注意</b>：优先匹配关键词可以排在前面；</p>
			</div>
		</el-dialog>
		<el-form ref="form" size="mini" :inline="true" :model="form" label-position="right">
			<el-form-item label="敏感词：">
				<div style="max-width:400px;min-width: 200px;font-weight: bold">{{form.keywordsName||'XXX'}}</div>
			</el-form-item>
			<el-form-item label="场景描述：">
				<div v-if="form.sceneDesc" style="width:500px;border: 1px dashed #ccc;padding:5px  10px;line-height: 25px"> {{form.sceneDesc}}</div>
				<div v-else>暂无描述</div>
			</el-form-item>
			<el-form-item label="after,near,answer 匹配距离:">
				<el-input-number v-model="form.distance" controls-position="right" :min="0" :max="500"></el-input-number>
        <span style="color:red;margin-left:10px">*请输入0~500内的整数</span> 
        <el-button type="text" style="margin-left:30px" @click="innerVisible=true">规则说明</el-button>
			</el-form-item>
			<div contentEditable="true"
					 @click="myeditorenter($event)"
					 @keypress.enter="myeditorenter($event)"
					 @blur="saveRange"
					 @paste="onPaste"
					 class="editDiv"
					 id="huashuModel">
			</div>
			<el-form-item label="插入节点:">
				<el-button size="mini" type="primary" style="margin-left:8px;" v-for="(item,index) in taglist" :key="index" @click="insertTag(item,index)">{{item.label}}</el-button>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
    <el-button @click="modelVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveFun">保 存</el-button>
  </span>
	</el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
export default {
  data() {
    return {
      dynamiclist: [],
      taglist:[
        {
          label: 'or (或)',
          value: 'or'
        },
        {
          label: 'near (临近)',
          value: 'near'
        },
        {
          label: 'after (后面)',
          value: 'after'
        },
        {
          label: 'and not (非)',
          value: 'andnot'
        },
        // {
        // 	label: '～ (至)',
        // 	value: '～'
        // },
      ],
      form: {
        keywordsName: '',
        id: '',
        keywordsId: '',
        distance: 10,
        sceneDesc:'',
        originalExpression: ''
      },
      modelVisible:false,
      innerVisible:false,
      innerVisible1:false,
      dialogVisible: false,
      tableIdName: "TemplateTaboo", // 当前页面需要的变量
      tableOption: this.$tableOption.TemplateTaboo, // 当前table配置项
      tableLoading: false, // 是否显示加载中
      showColumn: [], // 监听的显示列的变量
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },

      currentPage4: 1,
      value: "",
      input: "",
      tableData: [],
      multipleSelection: [],
      loadingFlag: false,
      orgType: localStorage.getItem("orgType"),
      ruleForm: {
        words: "",
        sceneDesc: '',
        id: "",
      },
      houseId: "",
      houseList: [],
      words: "",
      ruleser: {
        words: [{ required: true, message: "请填写禁忌词", trigger: "blur" }],
      },
      editFlag: false,
      hasOwn: [], // 是否拥有敏感词
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },

  watch: {
    showColumn(nowV) {
      let params = {
        tableIdName: this.tableIdName,
        optionData: nowV,
      };
      this.$db.upDate(params);
    },
  },

  created() {
    this.houseId=localStorage.getItem("houseId");
    // 获取显隐的列表
    this.setTableOption();
    this.tem_tab_add = this.permissions["tem_tab_add"];
    this.tem_tab_del = this.permissions["tem_tab_del"];
    this.tem_tab_edit = this.permissions["tem_tab_edit"];
    this.tem_tab_downLoad = this.permissions["tem_tab_downLoad"];
  },
  mounted() {
    this.zkhousePage();
  },
  methods: {
    // 插入节点
				insertTag(item,index){
          if(window._range){
            this.insertContent("<span contentEditable='false' style='color:red'>"+item.value+"</span><text>&nbsp;</text>");
          }else{
            this.insertHtmlAtCaret("<span contentEditable='false' style='color:red'>"+item.value+"</span><text>&nbsp;</text>");
          }
				},
				// 处理标签，删除不需要的标签格式
				delMark(str) {
					const hasStr = (str) => {
						let index = str.indexOf('<')
						let index1 = str.indexOf('>')
						if(index>0&&index1>0){
							let replaceStr=	str.substring(index, index1+1)
							str= str.replace(replaceStr,'')
							hasStr(str)
						}
					}
					hasStr(str)
				},
				// 确认插入选择的话术
				clickOK(){
					this.innerVisible1 = false
					if(!this.huashu) {this.$message.error('请选择话术'); return ;}
					this.insertContent("<text>"+this.huashu+"</text><span contentEditable='false' style='color:red'>answer</span><text>&nbsp;</text>");
				},

				//点击编辑按钮
				editFun(id){
					this.form.keywordsId = id
					this.form.keywordsName = ''
					this.form.id = ''
					// 获取模型数据回显
					axios({
						url: `/autoSR/zk/keymodel/findById`,
						method: 'get',
						params: {
							houseId: this.houseId,
							keyType: 3,
							keywordsId: id
						}
					}).then(res => {
						this.modelVisible = true
						if (res.code == 0) {
							let obj = res.data
							if(obj!=null){
								this.form.distance = obj.distance||10
								this.form.originalExpression = obj.originalExpression
								this.form.id = obj.id
								this.form.sceneDesc = obj.desc||''
								this.form.keywordsName = obj.level1Name
							}else{
								this.form.distance=10
								this.form.id = ''
								this.form.originalExpression=''
							}
						}else{
							this.form.distance = 10
							this.form.originalExpression = ''
							this.form.id = ''
						}
						this.$nextTick(()=>{
							let huashuModel = document.getElementById('huashuModel')
							huashuModel.innerHTML = this.form.originalExpression
						})
					}).catch((e)=>{
						this.modelVisible = true
					})
				},

				// 处理模型 关键词加#号
				replaceFun(str){
					let temp = str
					temp = temp.replace(/<text>\&nbsp\;<\/text>/g,'');
					temp = temp.replace(/\&nbsp\;/g,'');
					temp = temp.replace(/<text>/g,'');
					temp = temp.replace(/<\/text>/g,'');
					temp = temp.replace(/<span contenteditable="false" style="color:red">/g,' #');// 后台返回是这样的，变了，需要也处理一下
					temp = temp.replace(/<span style="color:red" contenteditable="false">/g,' #');
					temp = temp.replace(/<\/br>/g,'')
					temp = temp.replace(/<br>/g,'')
					temp = temp.replace(/<\/span>/g,'#')
					// console.log('处理前temp',temp);
					this.delMark(temp);
					// console.log(temp);
					return temp
				},
				// 模型保存
				saveFun(){
					let text = document.getElementById('huashuModel');
					// console.log(text.innerHTML);
					// console.log(text.innerText);
					let temp = text.innerHTML
					if(this.form.distance=='') {this.$message.error('请输入距离'); return;}
					if(text.innerText=='') {this.$message.error('请输入标签模型'); return;}

					axios({
						url: `/autoSR/zk/keymodel/updateKeywordsModel`,
						method: 'post',
						data: {
							id: this.form.id||"",
							houseId: this.houseId,
							level: 1,
							keywordsId: this.form.keywordsId,
							keywordsName: this.form.keywordsName,
							answerList: [],
							keyType: 3,
							formatExpression: this.replaceFun(temp),// 问题表达式
							originalExpression: temp,// html数据
							showFormatExpression: text.innerText,
							distance: this.form.distance,   // * 距离
							desc: this.form.sceneDesc//场景描述
						}
					}).then(res => {
						this.dialogVmodelVisibleisible = false
						if(res.code==0){
							this.$message.success(res.data)
							this.getorgCode()
						}else{
							this.$message.error(res.msg)
						}
					}).catch((e)=>{
						this.modelVisible = false
					})
				},
        	// 失去焦点时保存光标位置，记录光标位置
				saveRange: () => {
					let selection = window.getSelection ? window.getSelection() : document.selection;
					if (!selection.rangeCount) return;
					let range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
					window._range = range;
				},
				// 回显模型数据,Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上,so在 open 事件回调中进行
				openModel(){
					this.$nextTick(()=>{
						let huashuModel = document.getElementById('huashuModel')
						huashuModel.innerHTML = this.form.originalExpression
					})
				},
				//格式化粘贴文本方法
				onPaste(event) {
					// var e = event || window.event
					// // 阻止默认粘贴
					// e.preventDefault();
					// // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问
					// // clipboardData的getData(fomat) 从剪贴板获取指定格式的数据
					// var text =  (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
					// //清除回车
					// text = text.replace(/\[\d+\]|\n|\r/ig,"")
					// // 插入
					// document.execCommand("insertText", false, text);
					let e = event || window.event
					let types = event.clipboardData.types
					// 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问
					let flag = false
					if (types && types.length > 0) {
						types.forEach(ele => {
							if (ele == 'Files') {
								flag = true
							}
						})
					}
					if (flag) {
						event.preventDefault()
					}
				},
				myeditorenter(e) {
					e.preventDefault();
				},
				// 插入节点
				insertHtmlAtCaret(html) {
					document.getElementById('huashuModel').focus();
					var sel, range;
					if (window.getSelection) {
						// IE9 and non-IE
						sel = window.getSelection();
						if (sel.getRangeAt && sel.rangeCount) {
							range = sel.getRangeAt(0);
							range.deleteContents();
							// Range.createContextualFragment() would be useful here but is
							// non-standard and not supported in all browsers (IE9, for one)
							var el = document.createElement("div");
							el.innerHTML = html;
							var frag = document.createDocumentFragment(),
											node, lastNode;
							while ((node = el.firstChild)) {
								lastNode = frag.appendChild(node);
							}
							range.insertNode(frag);
							// Preserve the selection
							if (lastNode) {
								range = range.cloneRange();
								range.setStartAfter(lastNode);
								range.collapse(true);
								sel.removeAllRanges();
								sel.addRange(range);
							}
						}
					} else if (document.selection && document.selection.type != "Control") {
						// IE < 9
						document.selection.createRange().pasteHTML(html);
					}
				},
        	// 校验是否已经选择过此标签
				checkrepeat(){
					this.wajueList.forEach(item=>{
						item.disabled = false
					})
					this.wajueList.forEach(item=>{
						this.dynamiclist.forEach(obj=>{
							if(item.id==obj.markid){
								item.disabled = true
							}
						})
					})
				},
				addItemFun(){
					this.dynamiclist.push({
						editValue: '',//匹配模型正则表达式
						markid:'',
						level: '',
						name:''
					})
				},
				delItemFun(index){
					this.wajueList.forEach(item=>{
						if(item.id==this.dynamiclist[index].markid){
							item.disabled = false
						}
					})
					this.dynamiclist.splice(index,1)
					document.getElementById('huashuModel').focus(); // 防止插入到外面，造成不可删除的操作
				},
				// 基于保存的光标插入内容 --用于失去焦点后再继续插入内容
				insertContent(str) {
					let selection, range = window._range;// 当前光标位置对象
					if (!window.getSelection) {
						range.pasteHTML(str);
						range.collapse(false);
						range.select();
					} else {
						selection = window.getSelection ? window.getSelection() : document.selection;
						range.collapse(false);
						let hasR = range.createContextualFragment(str);
						let hasR_lastChild = hasR.lastChild;
						while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
							let e = hasR_lastChild;
							hasR_lastChild = hasR_lastChild.previousSibling;
							hasR.removeChild(e);
						}
						range.insertNode(hasR);
						if (hasR_lastChild) {
							range.setEndAfter(hasR_lastChild);
							range.setStartAfter(hasR_lastChild);
						}
						selection.removeAllRanges();
						selection.addRange(range);
					}
				},
				// 失去焦点时保存光标位置，记录光标位置
				saveRange: () => {
					let selection = window.getSelection ? window.getSelection() : document.selection;
					if (!selection.rangeCount) return;
					let range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
					window._range = range;
				},
				// 回显模型数据,Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上,so在 open 事件回调中进行
				openModel(){
					this.$nextTick(()=>{
						let huashuModel = document.getElementById('huashuModel')
						huashuModel.innerHTML = this.form.originalExpression
					})
				},
				//格式化粘贴文本方法
				onPaste(event) {
					// var e = event || window.event
					// // 阻止默认粘贴
					// e.preventDefault();
					// // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问
					// // clipboardData的getData(fomat) 从剪贴板获取指定格式的数据
					// var text =  (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
					// //清除回车
					// text = text.replace(/\[\d+\]|\n|\r/ig,"")
					// // 插入
					// document.execCommand("insertText", false, text);
					let e = event || window.event
					let types = event.clipboardData.types
					// 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问
					let flag = false
					if (types && types.length > 0) {
						types.forEach(ele => {
							if (ele == 'Files') {
								flag = true
							}
						})
					}
					if (flag) {
						event.preventDefault()
					}
				},
				myeditorenter(e) {
					e.preventDefault();
				},
				// 插入节点
				insertHtmlAtCaret(html) {
					document.getElementById('huashuModel').focus();
					var sel, range;
					if (window.getSelection) {
						// IE9 and non-IE
						sel = window.getSelection();
						if (sel.getRangeAt && sel.rangeCount) {
							range = sel.getRangeAt(0);
							range.deleteContents();
							// Range.createContextualFragment() would be useful here but is
							// non-standard and not supported in all browsers (IE9, for one)
							var el = document.createElement("div");
							el.innerHTML = html;
							var frag = document.createDocumentFragment(),
											node, lastNode;
							while ((node = el.firstChild)) {
								lastNode = frag.appendChild(node);
							}
							range.insertNode(frag);
							// Preserve the selection
							if (lastNode) {
								range = range.cloneRange();
								range.setStartAfter(lastNode);
								range.collapse(true);
								sel.removeAllRanges();
								sel.addRange(range);
							}
						}
					} else if (document.selection && document.selection.type != "Control") {
						// IE < 9
						document.selection.createRange().pasteHTML(html);
					}
				},
    // 获取当前页面的显隐
    setTableOption() {
      this.$db.getDataByKey(this.tableIdName).then((res) => {
        if (res.tableIdName == this.tableIdName) {
          this.showColumn = res.optionData;
        }
      });
    },
    downLoad() {
      let obj = {
        houseId: this.houseId,
        words: this.words,
      };
      exportMethodPost("autoSR/sensitivewords/export", "禁忌话术", obj);
    },
    houseChange() {
      this.page.currentPage = 1;
      this.words = "";
      this.taboofindbypagelist();
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          if (localStorage.getItem("orgType") == 3) {
            this.houseId = localStorage.getItem("houseId");
          } else {
            this.houseId = res.data[0].id;
          }
          this.taboofindbypagelist();
        });
    },
    taboofindbypagelist() {
      let obj = {
        current: this.page.currentPage,
        size: this.page.pageSize,
        houseId: this.houseId,
        words: this.words,
      };
      this.$api.http.taboofindbypage(obj).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
        this.hasOwn = res.data.records.map((item) => {
          return item.words;
        });
        this.page.total = res.data.total;

        // 表格中设置ref属性，在数据渲染之后或者updated()之后
        this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
      });
    },
    screening() {
      this.page.currentPage = 1;
      this.taboofindbypagelist();
    },
    //删除
    del(item) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        distinguishCancelAndClose: true,
        type: "warning",
      })
        .then(() => {
          this.$api.http.taboodelete({ id: item.id,houseId:this.houseId }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.page.currentPage = 1;
              this.words = "";
              this.taboofindbypagelist();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    //编辑
    bianji(row) {
      this.ruleForm.id = row.id;
      this.dialogVisible = true;
      this.ruleForm.words = row.words;
      this.ruleForm.sceneDesc = row.desc;
      this.editFlag = true;
    },

    editorinfo() {
      this.dialogVisible = true;
      this.editFlag = false;
      this.ruleForm.words = "";
    },
    editor() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.hasOwn.indexOf(this.ruleForm.words) != -1) {
            this.$message.error("该敏感词已存在");
            return;
          }
          this.loadingFlag = true;
          if (this.editFlag == false) {
            this.$api.http
              .tabooadd({
                houseId: this.houseId,
                words: this.ruleForm.words,
                desc: this.ruleForm.sceneDesc// 场景描述
              })
              .then((res) => {
                if (res.code == 0) {
                  this.dialogVisible = false;
                  this.$refs.ruleForm.resetFields();
                  this.page.currentPage = 1;
                  this.words = "";
                  this.taboofindbypagelist();
                  this.$message.success(res.data);
                } else {
                  this.$message.error(res.msg);
                }
                setTimeout(() => {
                  this.loadingFlag = false;
                }, 1);
              })
              .catch((e) => {
                setTimeout(() => {
                  this.loadingFlag = false;
                }, 1);
              });
          } else {
            this.$api.http
              .tabooupdate({
                id: this.ruleForm.id,
                desc: this.ruleForm.sceneDesc,
                words: this.ruleForm.words,
              })
              .then((res) => {
                if (res.code == 0) {
                  this.dialogVisible = false;
                  this.$refs.ruleForm.resetFields();
                  this.page.currentPage = 1;
                  this.words = "";
                  this.taboofindbypagelist();
                   this.$message.success(res.data);
                } else {
                  this.$message.error(res.msg);
                }
                setTimeout(() => {
                  this.loadingFlag = false;
                }, 1);
              })
              .catch((e) => {
                setTimeout(() => {
                  this.loadingFlag = false;
                }, 1);
              });
          }
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.taboofindbypagelist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.taboofindbypagelist();
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.editDiv{
			width:100%;
			min-height:60px;
			max-height:120px;
			overflow:auto;
			margin-bottom:10px;
			padding: 15px;
			outline: none;
			border:1px solid #409EFF;
			border-radius: 10px;
		}
.box-center {
  width: 100%;
  padding: 5px 15px 20px;
  min-width: 1000px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;

  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 14px;
      margin-left: 15px;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
    }
    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}
/deep/ .el-table__header-wrapper {
  thead {
    tr {
      th {
        background: #f5f7fa;
        color: #333333;
      }
    }
  }
}
/deep/ .el-dialog--center {
  border-radius: 8px;
  .el-dialog__title {
    font-weight: bold;
  }
}
/deep/ .el-button--primary {
  background: #2671e2 !important;
  border: 1px solid #2671e2 !important;
}
/deep/ .el-button--text {
  color: #2671e2;
}
</style>