liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
716 Commits
4 Branches
45 MiB
 
 
 
Tree: 2649c2d9bf
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2649c2d9bf'
${ noResults }
zkPCproject/src/views/Customer/label.vue

1231 lines
40 KiB
Raw Blame History 

  1. <template>

  2.   <div class="box-center">

  3.     <div id="app" style="padding-right: 40%;">

  4.       <div class="biaoti">客户画像关键词配置</div>

  5.       <div class="app-titel" style="margin-top: 20px" v-if="orgType!=3">

  6.         <div

  7.           class="label"

  8.           style="color: #32363d; font-weight: 400; font-size: 16px"

  9.         >

  10.           项目选择：

  11.         </div>

  12.         <div>

  13.           <el-select

  14.             v-model="houseId"

  15.             placeholder="请选择"

  16.             @change="houseChange"

  17.             filterable

  18.           >

  19.             <el-option

  20.               v-for="item in houseList"

  21.               :key="item.id"

  22.               :label="item.propertyName"

  23.               :value="item.id"

  24.             >

  25.             </el-option>

  26.           </el-select>

  27.         </div>

  28.       </div>

  29.       <div class="addlevl" style="cursor:pointer;" v-if="yyc_add_level1" @click="append1()">

  30.           新增一级

  31.       </div>

  32.       <div style="width: 100%; margin-top: 20px">

  33.         <el-tree ref="tree" :default-expand-all="true" :data="treeList">

  34.           <span class="custom-tree-node" slot-scope="{ node, data }">

  35. 

  36.             <span v-if="data.level == 1" style="font-size: 18px; color: #32363d" >

  37.               <img class="levelimg1" src="/img/level1.png" alt="" />

  38.               {{ data.name }}

  39.             </span>

  40. 

  41. 

  42.             <span v-if="data.level == 2 && data.isInterval == 1" style="font-size: 16px; color: #32363d" >

  43.               <img class="levelimg2" src="/img/level2.png" alt="" />

  44.               {{ data.name }}

  45.             </span>

  46.             <span v-if="data.level == 2 && data.isInterval == 0">

  47.                <img class="levelimg2" src="/img/level2.png" alt="" />

  48.               {{ data.name }}~{{ data.endName }}

  49.             </span>

  50. 

  51. 

  52.             <span v-if="data.level == 3" style="font-size: 14px; color: #32363d" >

  53.               <img class="levelimg3" src="/img/level3.png" alt="" />

  54.               {{ data.name }}

  55.             </span>

  56. 

  57. 

  58. 

  59.             <span v-if="data.level == 1" style="display: flex; align-items: center">

  60.               <span class="editorcd" @click.stop="append(node, data)" style="display: flex; align-items: center" >

  61.                 <img class="levelimg3" src="/img/add1.png" alt="" />

  62.                 <span>添加二级</span>

  63.               </span>

  64.             <span  style="margin-left: 10px" v-if="data.isInterval!=0">

  65. 						  <el-button class="editor" type="text" size="mini" @click.stop="() => ddeditor(node, data)">编辑</el-button>

  66. 					  </span>

  67.             </span>

  68. 

  69.             <span v-if="data.level == 2" style="display: flex; align-items: center" >

  70.               <span v-if="data.isInterval == 1" class="editorcd2"  @click.stop="append(node, data)" style="display: flex; align-items: center">

  71.                 <img class="levelimg3" src="/img/add2.png" alt="" />

  72.                 <span>添加三级</span>

  73.               </span>

  74.               <span style="margin-left: 10px">

  75.                 <el-button class="editorcd" type="text" size="mini" @click.stop="ddeditor(node, data)">编辑</el-button>

  76. 						  <el-button class="editor" v-if="labelmodelshow" type="text" size="mini" @click="() => moxingEdit(node, data)">编辑模型</el-button>

  77.               </span>

  78.               <span style="margin-left: 10px">

  79.                 <el-button class="remove" type="text" size="mini" @click.stop="remove(node, data)" >删除</el-button>

  80.               </span>

  81.             </span>

  82.             <span v-if="data.level == 3" style="display: flex; align-items: center" >

  83.                <span style="margin-left: 10px">

  84.                 <el-button class="editorcd" type="text" size="mini" @click.stop="ddeditor(node, data)" >编辑</el-button>

  85.               </span>

  86.               <span style="margin-left: 10px" v-if="labelmodelshow">

  87.                 <el-button class="editorcd" type="text" size="mini" @click.stop="moxingEdit(node, data)" >编辑模型</el-button>

  88.               </span>

  89.               <span style="margin-left: 10px">

  90.                 <el-button class="remove" type="text" size="mini" @click.stop="remove(node, data)" >删除</el-button>

  91.               </span>

  92.             </span>

  93.           </span>

  94.         </el-tree>

  95.       </div>

  96. 

  97.       <el-dialog title="新增" :visible.sync="dialogFormVisible" :center="true" width="600px">

  98.         <div

  99.           v-if="amountintervalname == '意向面积'"

  100.           style="display: flex; height: 40px; line-height: 40px"

  101.         >

  102.           <span>面积区间：</span>

  103.           <span style="width: 100px"

  104.             ><el-input type="number" placeholder="面积区间" v-model="addForm.name"></el-input

  105.           ></span>

  106.           <span style="margin-left: 6px">平方</span>

  107.           <span style="margin-left: 12px; margin-right: 12px">~</span>

  108.           <span style="width: 100px"

  109.             ><el-input type="number" placeholder="面积区间" v-model="addForm.endName"></el-input

  110.           ></span>

  111.           <span style="margin-left: 6px">平方</span>

  112.         </div>

  113.         <div

  114.           v-else-if="amountintervalname == '购房预算'"

  115.           style="display: flex; height: 40px; line-height: 40px"

  116.         >

  117.           <span>预算区间：</span>

  118.           <span style="width: 100px"

  119.             ><el-input type="number" placeholder="预算区间" v-model="addForm.name"></el-input

  120.           ></span>

  121.           <span style="margin-left: 6px">万元</span>

  122.           <span style="margin-left: 12px; margin-right: 12px">~</span>

  123.           <span style="width: 100px"

  124.             ><el-input type="number" placeholder="预算区间"  v-model="addForm.endName"></el-input

  125.           ></span>

  126.           <span style="margin-left: 6px">万元</span>

  127.         </div>

  128.         <el-form :model="addForm" v-else>

  129.           <el-row :gutter="24">

  130.             <el-col :span="24">

  131.               <el-form-item

  132.                 label="一级大类名称:"

  133.                 v-if="level == 0"

  134.                 :label-width="formLabelWidth"

  135.               >

  136.                 <el-input v-model="addForm.name" placeholder="一级大类名称" maxlength="8" autocomplete="off"></el-input>

  137.               </el-form-item>

  138.               <el-form-item

  139.                 label="二级名称:"

  140.                 v-if="level == 2"

  141.                 :label-width="formLabelWidth"

  142.               >

  143.                 <el-input v-model="addForm.name" placeholder="二级名称" maxlength="8" autocomplete="off"></el-input>

  144.               </el-form-item>

  145.               <el-form-item

  146.                 label="三级名称:"

  147.                 v-if="level == 3"

  148.                 :label-width="formLabelWidth"

  149.               >

  150.                 <el-input v-model="addForm.name" placeholder="三级名称" maxlength="8" autocomplete="off"></el-input>

  151.               </el-form-item>

  152.               <el-form-item label="场景描述：" :label-width="formLabelWidth"  v-if="level==2||level==3">

  153.                 <el-input

  154.                   type="textarea"

  155.                   maxlength="100"

  156.                   show-word-limit

  157.                   :autosize="{ minRows: 4, maxRows: 8}"

  158.                   placeholder="请输入内容"

  159.                   v-model="addForm.sceneDesc">

  160.                 </el-input>

  161.                 <div>增加场景描述有利于标签命中，场景越丰富触达越精准；

  162.                 例如：意向面积：120平，场景：我想要一个120平的；</div>

  163.               </el-form-item>

  164.             </el-col>

  165.           </el-row>

  166.         </el-form>

  167.         <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">

  168.           <el-button @click="dialogFormVisible = false">取 消</el-button>

  169.           <el-button type="primary" @click="addSubmit">确 定</el-button>

  170.         </div>

  171.       </el-dialog>

  172.       <!-- 删除确认弹框 -->

  173.       <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :center="true">

  174.         <span>确定删除该条内容吗</span>

  175.         <span slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">

  176.           <el-button @click="dialogVisible = false">取 消</el-button>

  177.           <el-button type="primary" @click="checkDelete">确 定</el-button>

  178.         </span>

  179.       </el-dialog>

  180. 

  181.       <!--?编辑弹框?-->

  182.       <el-dialog title="编辑" :visible.sync="isshowage" :center="true" width="600px">

  183.         <div

  184.           v-if="amountintervalname == '意向面积'"

  185.           style="display: flex; height: 40px; line-height: 40px"

  186.         >

  187.           <span>面积区间：</span>

  188.           <span style="width: 100px"

  189.             ><el-input type="number" placeholder="面积区间" v-model="frosasd.name"></el-input

  190.           ></span>

  191.           <span style="margin-left: 6px">平方</span>

  192.           <span style="margin-left: 12px; margin-right: 12px">~</span>

  193.           <span style="width: 100px"

  194.             ><el-input type="number" placeholder="面积区间" v-model="frosasd.endName"></el-input

  195.           ></span>

  196.           <span style="margin-left: 6px">平方</span>

  197.         </div>

  198.         <div

  199.           v-else-if="amountintervalname == '购房预算'"

  200.           style="display: flex; height: 40px; line-height: 40px"

  201.         >

  202.           <span>预算区间：</span>

  203.           <span style="width: 100px"

  204.             ><el-input type="number" placeholder="预算区间" v-model="frosasd.name"></el-input

  205.           ></span>

  206.           <span style="margin-left: 6px">万元</span>

  207.           <span style="margin-left: 12px; margin-right: 12px">~</span>

  208.           <span style="width: 100px"

  209.             ><el-input type="number" placeholder="预算区间" v-model="frosasd.endName"></el-input

  210.           ></span>

  211.           <span style="margin-left: 6px">万元</span>

  212.         </div>

  213.         <div v-else style="display: flex;align-items: center;height: 40px;">

  214.           <div style="width:90px">

  215.             类名:

  216.           </div>

  217.             <el-input  maxlength="8"

  218.               v-model="frosasd.name"

  219.               placeholder="类名"

  220.               type="text"

  221.             ></el-input>

  222.         </div>

  223.         <div style="display: flex; align-items: center;margin-top:20px" v-if="frosasd.level==2||frosasd.level==3">

  224.           <div style="width:105px">

  225.             场景描述：

  226.           </div>

  227.           <div>

  228.              <el-input

  229.                 type="textarea"

  230.                 maxlength="100"

  231.                 show-word-limit

  232.                 :autosize="{ minRows: 4, maxRows: 8}"

  233.                 placeholder="请输入内容"

  234.                 v-model="frosasd.desc">

  235.               </el-input>

  236.               <div>增加场景描述有利于标签命中，场景越丰富触达越精准；

  237.               例如：意向面积：120平，场景：我想要一个120平的；</div>

  238.           </div>

  239.         </div>

  240.         <div v-if="frosasd.level == 1" style="display: flex;align-items: center;height: 40px;">

  241.             <div style="margin-left: 30px;height: 30px;line-height: 30px;">是否必选：</div>

  242.             <div>

  243.                 <el-radio-group v-model="frosasd.mustSelected">

  244.                     <el-radio :label="0">是</el-radio>

  245.                     <el-radio :label="1">否</el-radio>

  246.                 </el-radio-group>

  247.             </div>

  248.         </div>

  249.         <div style="display: flex; justify-content: center; margin-top: 40px">

  250.           <button

  251.             style="

  252.               width: 100px;

  253.               height: 40px;

  254.               border-radius: 4px;

  255.               background: #ffffff;

  256.               font-size: 14px;

  257.               border: 1px solid #dcdfe6;

  258.             "

  259.             @click="submicll()"

  260.           >

  261.             取消

  262.           </button>

  263.           <button

  264.             style="

  265.               width: 100px;

  266.               height: 40px;

  267.               border-radius: 4px;

  268.               background: #2671E2;

  269.               font-size: 14px;

  270.               margin-left: 60px;

  271.               color: #ffffff;

  272.               border: none;

  273.             "

  274.             @click="submiadd()"

  275.           >

  276.             提交

  277.           </button>

  278.         </div>

  279.       </el-dialog>

  280. 

  281. 

  282.    <el-dialog title="新增一级" :visible.sync="dialogVisible2" :center="true" width="400px">

  283.         <el-form :model="addForm2">

  284.           <el-row :gutter="24">

  285.               <el-form-item

  286.                 label="名称:"

  287.               >

  288.                 <el-input style="width:300px;" placeholder="名称" v-model="addForm2.name"  maxlength="8"  autocomplete="off"></el-input>

  289.               </el-form-item>

  290.           </el-row>

  291.           <el-row :gutter="24">

  292.               <el-form-item

  293.                 label="是否必选:"

  294.               >

  295.               <el-radio-group v-model="addForm2.mustSelected">

  296.                 <el-radio :label="0">是</el-radio>

  297.                 <el-radio :label="1">否</el-radio>

  298.               </el-radio-group>

  299.             </el-form-item>

  300.           </el-row>

  301.         </el-form>

  302.         <span slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">

  303.           <el-button @click="dialogVisible2 = false">取 消</el-button>

  304.           <el-button type="primary" @click="addclick()">确 定</el-button>

  305.         </span>

  306.     </el-dialog>

  307.     <!--   匹配模型 -->

  308.     <el-dialog

  309.           title="编辑模型"

  310.           @open="openModel"

  311.           :close-on-click-modal="false"

  312.           :visible.sync="moxingVisible"

  313.           >

  314.     <el-dialog

  315.             title="匹配规则"

  316.             :visible.sync="innerVisible"

  317.             append-to-body>

  318.       <div style="max-height: 430px;overflow: auto">

  319.         <p><b>匹配距离</b>：关键字匹配字数距离，主要针对near/after/w-  生效，w- 的字数统计从挖掘话术后，客户的第一句话开始统计；</p>

  320.         <p style="padding-left: 15px">例如：设置为10，面积  after 140</br>

  321.           命中话术："想买一个面积在140平的"</br>

  322.           超出10个字，有关键字不命中话术参考：“房屋面积啊，你们这边有多大的，有没有140平左右的”；</p>

  323.         <p><b>or（或）</b>：多个关键词，匹配上1个就行</p>

  324.         <p style="padding-left: 15px">例如标签：自住</br>

  325.           匹配模型：自己住 or 给自己</br>

  326.           命中话术：我们自己住/给自己买的</p>

  327.         <p><b>and not（非）</b>：排除反面意思</p>

  328.         <p style="padding-left: 15px">例如：北京户口，</br>

  329.           匹配模型：是北京户口 and not 不是北京户口</br>

  330.           命中话术：我是北京户口；</br>

  331.           反面话术：我不是北京户口</p>

  332.         <p><b>near （ 临近）</b>：1个关键词前后一定范围出现过另一个关键词就算命中，有距离限制</p>

  333.         <p style="padding-left: 15px">例如标签：购房预算 140w</br>

  334.           匹配模型：预算  near 140</br>

  335.           命中话术：我的预算是140w或大概140w的购房预算</p>

  336.         <p><b>after（后面）</b>：一段文本出现2个关键词，并且按照先后的顺序即算命中，有距离限制</p>

  337.         <p style="padding-left: 15px">例如标签：意向面积  140平</br>

  338.           匹配模型： 面积  after  140   ，140在面积后面才算生效；</br>

  339.           命中话术：想买一个面积在140平的；</p>

  340.         <p><b>w-（挖掘话术业务）</b>：顾问执行了挖掘话术，客户回答结果，有距离限制，从客户话术文本开始</p>

  341.         <p style="padding-left: 15px">例如标签：北京户口</br>

  342.           匹配模型：（w-是 or w-有） and not  （w-不是 or w-没有）

  343.           命中话术：销售：你有北京户口吗？</br>

  344.           客户：有的；</p>

  345.         <p><b>-n（命中距离）</b>：near/after-n ,单个near/after的匹配距离，n大于0，小于500</p>

  346.         <p style="padding-left: 15px">例如 ：面积  after-10  140</br>

  347.           10个字内，命中话术参考："想买一个面积在140平的"</br>

  348.           超出10个字，有关键字不命中话术参考：“房屋面积啊，你们这边有多大的，有没有140平左右的”；</p>

  349.         <p><b>注意</b>：-n  与 near/after/answer 之间<b>不能有空格</b>；</p></br>

  350.         <p><b>注意</b>：优先匹配关键词可以排在前面；</p>

  351.       </div>

  352. 

  353.     </el-dialog>

  354.     <el-form ref="form" size="mini" :inline="true" :model="form" label-position="right">

  355.       <el-form-item label="标签名称:">

  356.         <div style="max-width:400px;min-width: 200px;font-weight: bold">{{form.keywordsName}}</div>

  357.       </el-form-item>

  358.       <el-form-item label="场景描述：">

  359.         <div v-if="form.sceneDesc" style="width:500px;border: 1px dashed #ccc;padding:5px  10px;line-height: 25px"> {{form.sceneDesc}}</div>

  360.         <div v-else>暂无描述</div>

  361.       </el-form-item>

  362.       <el-form-item label="after,near,w- 匹配距离:">

  363.         <el-input-number  v-model="form.distance" controls-position="right" :min="0" :max="500"></el-input-number></el-input><span style="color:red;margin-left:10px">*请输入0~500内的整数</span> <el-button type="text" style="margin-left:30px" @click="innerVisible=true">规则说明</el-button>

  364.       </el-form-item>

  365.       <div contentEditable="true"

  366.            @click="myeditorenter($event)"

  367.            @keypress.enter="myeditorenter($event)"

  368.            @blur="saveRange"

  369.            class="editDiv"

  370.            id="huashuModel">

  371.       </div>

  372.       <div v-if="dynamiclist.length">需求挖掘匹配：</div>

  373.       <div class="dynamicbox">

  374.         <div v-for="item in dynamiclist" :key="item" class="itemlist">

  375.           <el-input size="small" disabled style="width: 220px" v-model="item.question"></el-input>

  376.           <div class="item-input" style="pointer-events: none;" v-html="item.editValue"></div>

  377.         </div>

  378.       </div>

  379.       <el-form-item label="插入节点:">

  380.         <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>

  381.       </el-form-item>

  382.     </el-form>

  383.     <span slot="footer" class="dialog-footer">

  384.     <el-button @click="moxingVisible = false">取 消</el-button>

  385.     <el-button type="primary" @click="saveFun">保 存</el-button>

  386.   </span>

  387.   </el-dialog>

  388. 

  389.     </div>

  390.   </div>

  391. </template>

  392. 

  393. <script>

  394. import { mapGetters } from "vuex";

  395. export default {

  396.   data() {

  397.     return {

  398.       dynamiclist: [],

  399.       taglist: [

  400.         {

  401.           label: "or (或)",

  402.           value: "or",

  403.         },

  404.         {

  405.           label: "near (临近)",

  406.           value: "near",

  407.         },

  408.         {

  409.           label: "after (后面)",

  410.           value: "after",

  411.         },

  412.         {

  413.           label: "and not (非)",

  414.           value: "and not",

  415.         },

  416.         // {

  417.         //     label: '～ (至)',

  418.         //     value: '～'

  419.         // },

  420.       ],

  421.       moxingVisible: false,

  422.       innerVisible: false,

  423.       form: {

  424.         keywordsName: "",

  425.         id: "",

  426.         keywordsId: "",

  427.         distance: 10,

  428.         sceneDesc: "",

  429.         originalExpression: "",

  430.       },

  431.       formLabelWidth: "120px",

  432.       dialogFormVisible: false,

  433.       dialogVisible: false,

  434.       dialogVisible2: false,

  435.       orgType: localStorage.getItem("orgType"),

  436.       isshowage: false,

  437.       treeList: [], //树形数据

  438.       houseList: [],

  439.       orgCode: "", //公司id

  440.       houseId: "",

  441.       addForm: {

  442.         name: "",

  443.         endName: "",

  444.         sceneDesc: "",

  445.       },

  446.       addForm2: {

  447.         name: "",

  448.         mustSelected: 0,

  449.       },

  450.       level: 0,

  451.       pid: "",

  452.       deleteId: "",

  453.       frosasd: {

  454.         name: "",

  455.         endName: "",

  456.         isInterval: "",

  457.         id: "",

  458.         pid: "",

  459.         orgCode: "",

  460.         sort: "",

  461.         level: "",

  462.         desc: "",

  463.         mustSelected: 1, // 是否必选

  464.       },

  465.       amountintervalname: "",

  466.       isInterval: "",

  467.       orgCodes: "",

  468.     };

  469.   },

  470.   computed: {

  471.     ...mapGetters(["permissions"]),

  472.   },

  473.   created() {

  474.     this.yyc_add_level1 = this.permissions["yyc_add_level1"];

  475.     this.labelmodelshow = this.permissions["labelmodelshow"]; // 编辑模型按钮权限

  476.   },

  477.   mounted() {

  478.     // 获取项目列表

  479.     this.zkhousePage();

  480.   },

  481.   methods: {

  482.     // 基于保存的光标插入内容 --用于失去焦点后再继续插入内容

  483.     insertContent(str) {

  484.       let selection,

  485.         range = window._range; // 当前光标位置对象

  486.       if (!window.getSelection) {

  487.         range.pasteHTML(str);

  488.         range.collapse(false);

  489.         range.select();

  490.       } else {

  491.         selection = window.getSelection

  492.           ? window.getSelection()

  493.           : document.selection;

  494.         range.collapse(false);

  495.         let hasR = range.createContextualFragment(str);

  496.         let hasR_lastChild = hasR.lastChild;

  497.         while (

  498.           hasR_lastChild &&

  499.           hasR_lastChild.nodeName.toLowerCase() == "br" &&

  500.           hasR_lastChild.previousSibling &&

  501.           hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br"

  502.         ) {

  503.           let e = hasR_lastChild;

  504.           hasR_lastChild = hasR_lastChild.previousSibling;

  505.           hasR.removeChild(e);

  506.         }

  507.         range.insertNode(hasR);

  508.         if (hasR_lastChild) {

  509.           range.setEndAfter(hasR_lastChild);

  510.           range.setStartAfter(hasR_lastChild);

  511.         }

  512.         selection.removeAllRanges();

  513.         selection.addRange(range);

  514.       }

  515.     },

  516.     // 失去焦点时保存光标位置

  517.     saveRange: () => {

  518.       let selection = window.getSelection

  519.         ? window.getSelection()

  520.         : document.selection;

  521.       if (!selection.rangeCount) return;

  522.       let range = selection.createRange

  523.         ? selection.createRange()

  524.         : selection.getRangeAt(0);

  525.       window._range = range;

  526.     },

  527.     // 回显模型数据,Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上,so在 open 事件回调中进行

  528.     openModel() {

  529.       // this.$nextTick(()=>{

  530.       //     let huashuModel = document.getElementById('huashuModel')

  531.       //     huashuModel.innerHTML = this.form.originalExpression

  532.       // })

  533.     },

  534.     //格式化粘贴文本方法

  535.     onPaste(event) {

  536.       var e = event || window.event;

  537.       // 阻止默认粘贴

  538.       e.preventDefault();

  539.       // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问

  540.       // clipboardData的getData(fomat) 从剪贴板获取指定格式的数据

  541.       var text =

  542.         (e.originalEvent || e).clipboardData.getData("text/plain") ||

  543.         prompt("在这里输入文本");

  544.       //清除回车

  545.       text = text.replace(/\[\d+\]|\n|\r/gi, "");

  546.       // 插入

  547.       document.execCommand("insertText", false, text);

  548.     },

  549.     myeditorenter(e) {

  550.       e.preventDefault();

  551.     },

  552.     // 插入节点

  553.     insertHtmlAtCaret(html) {

  554.       document.getElementById("huashuModel").focus();

  555.       var sel, range;

  556.       if (window.getSelection) {

  557.         // IE9 and non-IE

  558.         sel = window.getSelection();

  559.         if (sel.getRangeAt && sel.rangeCount) {

  560.           range = sel.getRangeAt(0);

  561.           range.deleteContents();

  562.           // Range.createContextualFragment() would be useful here but is

  563.           // non-standard and not supported in all browsers (IE9, for one)

  564.           var el = document.createElement("div");

  565.           el.innerHTML = html;

  566.           var frag = document.createDocumentFragment(),

  567.             node,

  568.             lastNode;

  569.           while ((node = el.firstChild)) {

  570.             lastNode = frag.appendChild(node);

  571.           }

  572.           range.insertNode(frag);

  573.           // Preserve the selection

  574.           if (lastNode) {

  575.             range = range.cloneRange();

  576.             range.setStartAfter(lastNode);

  577.             range.collapse(true);

  578.             sel.removeAllRanges();

  579.             sel.addRange(range);

  580.           }

  581.         }

  582.       } else if (document.selection && document.selection.type != "Control") {

  583.         // IE < 9

  584.         document.selection.createRange().pasteHTML(html);

  585.       }

  586.     },

  587.     // 点击插入标签

  588.     insertTag(item, index) {

  589.       if (window._range) {

  590.         this.insertContent(

  591.           "<span contentEditable='false' style='color:red'>" +

  592.             item.value +

  593.             "</span><text>&nbsp;</text>"

  594.         );

  595.       } else {

  596.         this.insertHtmlAtCaret(

  597.           "<span contentEditable='false' style='color:red'>" +

  598.             item.value +

  599.             "</span><text>&nbsp;</text>"

  600.         );

  601.       }

  602.     },

  603.     // 处理标签，删除不需要的标签格式

  604.     delMark(str) {

  605.       const hasStr = (str) => {

  606.         let index = str.indexOf("<");

  607.         let index1 = str.indexOf(">");

  608.         if (index > 0 && index1 > 0) {

  609.           let replaceStr = str.substring(index, index1 + 1);

  610.           str = str.replace(replaceStr, "");

  611.           hasStr(str);

  612.         }

  613.       };

  614.       hasStr(str);

  615.     },

  616.     // 处理模型 关键词加#号

  617.     replaceFun(str) {

  618.       let temp = str;

  619.       temp = temp.replace(/<text>\&nbsp\;<\/text>/g, "");

  620.       temp = temp.replace(/\&nbsp\;/g, "");

  621.       temp = temp.replace(/<text>/g, "");

  622.       temp = temp.replace(/<\/text>/g, "");

  623.       temp = temp.replace(

  624.         /<span contenteditable="false" style="color:red">/g,

  625.         " #"

  626.       ); // 后台返回是这样的，变了，需要也处理一下

  627.       temp = temp.replace(

  628.         /<span style="color:red" contenteditable="false">/g,

  629.         " #"

  630.       );

  631.       temp = temp.replace(/<\/span>/g, "#");

  632.       // console.log(temp);

  633.       this.delMark(temp);

  634.       return temp;

  635.     },

  636.     // 模型保存

  637.     saveFun() {

  638.       let text = document.getElementById("huashuModel");

  639.       // console.log(text.innerHTML);

  640.       // console.log(text.innerText);

  641.       let temp = text.innerHTML;

  642.       if (this.form.distance == "") {

  643.         this.$message.error("请输入距离");

  644.         return;

  645.       }

  646.       if (text.innerText == "") {

  647.         this.$message.error("请输入标签模型");

  648.         return;

  649.       }

  650. 

  651.       axios({

  652.         url: `/autoSR/zk/keymodel/updateKeywordsModel`,

  653.         method: "post",

  654.         data: {

  655.           id: this.form.id,

  656.           houseId: this.houseId,

  657.           level: this.level,

  658.           keywordsId: this.form.keywordsId,

  659.           keywordsName: this.form.keywordsName,

  660.           answerList: [],

  661.           keyType: 2,

  662.           formatExpression: this.replaceFun(temp), // 问题表达式

  663.           original: temp, // html数据

  664.           showFormatExpression: text.innerText,

  665.           distance: this.form.distance, // * 距离

  666.         },

  667.       })

  668.         .then((data) => {

  669.           this.moxingVisible = false;

  670.           if (data.code == 0) {

  671.             this.$message.success(data.data);

  672.             this.getorgCode();

  673.           } else {

  674.             this.$message.error(data.msg);

  675.           }

  676.         })

  677.         .catch((e) => {

  678.           this.moxingVisible = false;

  679.         });

  680.     },

  681.     moxingEdit(node, data) {

  682.       this.level = data.level;

  683.       this.form.keywordsName = data.endName

  684.         ? data.name + "~" + data.endName

  685.         : data.name;

  686.       this.form.keywordsId = data.keywordsId;

  687.       this.form.sceneDesc = data.desc || "";

  688.       // 获取模型数据回显

  689.       axios({

  690.         url: `/autoSR/zk/keymodel/findById`,

  691.         method: "get",

  692.         params: {

  693.           houseId: this.houseId,

  694.           level: this.level,

  695.           keyType: 2,

  696.           keywordsId: data.id,

  697.         },

  698.       })

  699.         .then((res) => {

  700.           // console.log(res)

  701.           this.moxingVisible = true;

  702.           if (res.code == 0) {

  703.             let obj = res.data;

  704.             if (obj != null) {

  705.               this.form.distance = obj.distance || 10;

  706.               this.form.originalExpression = obj.originalExpression;

  707.               this.form.id = obj.id;

  708.               // 回显标签模型数据

  709.               if (obj.answerList && obj.answerList.length) {

  710.                 this.dynamiclist = obj.answerList.map((cont) => {

  711.                   return {

  712.                     question: cont.question,

  713.                     editValue: cont.originalExpression,

  714.                   };

  715.                 });

  716.                 // console.log(this.dynamiclist)

  717.               } else {

  718.                 this.dynamiclist = [];

  719.               }

  720.             } else {

  721.               this.form.distance = 10;

  722.               this.form.originalExpression = this.form.keywordsName;

  723.               this.form.id = "";

  724.             }

  725.           } else {

  726.             this.form.distance = 10;

  727.             this.form.originalExpression = this.form.keywordsName;

  728.           }

  729.           this.$nextTick(() => {

  730.             let huashuModel = document.getElementById("huashuModel");

  731.             huashuModel.innerHTML = this.form.originalExpression;

  732.           });

  733.         })

  734.         .catch((e) => {

  735.           this.moxingVisible = true;

  736.         });

  737.     },

  738.     addclick() {

  739.       var orgCode = "";

  740.       if (localStorage.getItem("orgType") == 3) {

  741.         orgCode = localStorage.getItem("orgCode");

  742.       } else {

  743.         orgCode = this.orgCodes;

  744.       }

  745.       if (this.addForm2.name != "") {

  746.         axios({

  747.           url: `/autoSR/zk/keywords/add`,

  748.           method: "post",

  749.           data: {

  750.             pid: 0,

  751.             name: this.addForm2.name,

  752.             mustSelected: this.addForm2.mustSelected,

  753.             level: 1,

  754.             orgCode: orgCode,

  755.             houseId: this.houseId,

  756.           },

  757.         }).then((res) => {

  758.           if (res.code == 0) {

  759.             this.dialogVisible2 = false;

  760.             this.getHouse();

  761.           } else {

  762.             this.$message({

  763.               message: res.msg || "添加失败",

  764.               type: "error",

  765.             });

  766.           }

  767.         });

  768.       } else {

  769.         this.$message({

  770.           message: "内容不能为空",

  771.           type: "warning",

  772.         });

  773.         return;

  774.       }

  775.     },

  776.     append1() {

  777.       this.addForm2.name = "";

  778.       this.dialogVisible2 = true;

  779.     },

  780.     // 获取模板数据

  781.     getHouse() {

  782.       axios({

  783.         url: `/autoSR/zk/keywords/findKeywordsTemplate`,

  784.         method: "get",

  785.         params: {

  786.           houseId: this.houseId,

  787.         },

  788.       }).then((res) => {

  789.         if (res.code == 0) {

  790.           // console.log(res.data);

  791.           this.treeList = res.data;

  792.         }

  793.       });

  794.     },

  795.     // 添加二三级节点入口

  796.     append(node, data) {

  797.       this.amountintervalname = data.name;

  798.       this.addForm.name = "";

  799.       this.addForm.endName = "";

  800.       this.addForm.sceneDesc = "";

  801.       this.pid = data.id;

  802.       this.level = data.level + 1;

  803.       this.orgCode = data.orgCode;

  804.       if (

  805.         this.amountintervalname == "意向面积" ||

  806.         this.amountintervalname == "购房预算"

  807.       ) {

  808.         this.isInterval = 0;

  809.       } else {

  810.         this.isInterval = 1;

  811.       }

  812.       this.dialogFormVisible = true;

  813.     },

  814.     houseChange() {

  815.       this.houseList.map((item) => {

  816.         if (item.id == this.houseId) {

  817.           this.orgCodes = item.orgCode;

  818.         }

  819.       });

  820.       console.log(this.orgCodes);

  821.       this.getHouse();

  822.     },

  823.     // 添加节点确认按钮

  824.     addSubmit() {

  825.       if (this.addForm.name != "") {

  826.         if (

  827.           this.amountintervalname == "意向面积" ||

  828.           this.amountintervalname == "购房预算"

  829.         ) {

  830.           if (Number(this.addForm.name) > Number(this.addForm.endName)) {

  831.             this.$message({

  832.               message: "第一个值必须小于第二个值，请检查！",

  833.               type: "warning",

  834.             });

  835.             return;

  836.           } else {

  837.             this.dialogFormVisible = false;

  838.             this.addNode();

  839.           }

  840.         } else {

  841.           this.dialogFormVisible = false;

  842.           this.addNode();

  843.         }

  844.       } else {

  845.         this.$message({

  846.           message: "内容不能为空",

  847.           type: "warning",

  848.         });

  849.         return;

  850.       }

  851.     },

  852.     // 新增的节点保存

  853.     addNode() {

  854.       axios({

  855.         url: `/autoSR/zk/keywords/add`,

  856.         method: "post",

  857.         data: {

  858.           pid: this.pid,

  859.           name: this.addForm.name,

  860.           endName: this.addForm.endName,

  861.           level: this.level,

  862.           orgCode: this.orgCode,

  863.           isInterval: this.isInterval,

  864.           houseId: this.houseId,

  865.           desc: this.addForm.sceneDesc,

  866.         },

  867.       }).then((res) => {

  868.         if (res.code == 0) {

  869.           if (this.level == 2) {

  870.             // 二级

  871.             let newChild = {

  872.               id: res.data,

  873.               pid: this.pid,

  874.               name: this.addForm.name,

  875.               endName: this.addForm.endName,

  876.               orgCode: this.orgCode,

  877.               level: this.level,

  878.               isInterval: this.isInterval,

  879.               children: [],

  880.             };

  881.             this.treeList.forEach((item, index) => {

  882.               if (item.id == this.pid) {

  883.                 item.children.push(newChild);

  884.               }

  885.             });

  886.           } else {

  887.             let newChilds = {

  888.               id: res.data,

  889.               pid: this.pid,

  890.               name: this.addForm.name,

  891.               orgCode: this.orgCode,

  892.               level: this.level,

  893.               isInterval: 1,

  894.               endName: "",

  895.             };

  896.             this.treeList.forEach((item, index) => {

  897.               item.children.forEach((ite, inde) => {

  898.                 if (ite.id == this.pid) {

  899.                   ite.children.push(newChilds);

  900.                 }

  901.               });

  902.             });

  903.           }

  904.           this.zkhousePage();

  905.         }

  906.       });

  907.     },

  908.     //删除节点

  909.     remove(node, data) {

  910.       // console.log(data, "123");

  911.       this.deleteId = data.id;

  912.       if (data.level == 3) {

  913.         this.dialogVisible = true;

  914.       } else {

  915.         if (data.children.length == 0) {

  916.           this.dialogVisible = true;

  917.         } else {

  918.           this.$message({

  919.             message: "请先清空子级",

  920.             type: "warning",

  921.           });

  922.         }

  923.       }

  924.     },

  925.     // 确认删除自定义的节点

  926.     checkDelete() {

  927.       axios({

  928.         url: `/autoSR/zk/keywords/delete`,

  929.         method: "get",

  930.         params: {

  931.           id: this.deleteId,

  932.           houseId: this.houseId,

  933.         },

  934.       }).then((res) => {

  935.         if (res.code == 0) {

  936.           this.treeList.forEach((item, index) => {

  937.             item.children.forEach((ite, inde) => {

  938.               if (ite.id == this.deleteId) {

  939.                 this.treeList[index].children.splice(inde, 1);

  940.               } else {

  941.                 ite.children.forEach((it, ine) => {

  942.                   if (it.id == this.deleteId) {

  943.                     this.treeList[index].children[inde].children.splice(ine, 1);

  944.                   }

  945.                 });

  946.               }

  947.             });

  948.           });

  949.           this.dialogVisible = false;

  950.           this.$message.success("删除成功");

  951.         }

  952.       });

  953.     },

  954.     //编辑

  955.     ddeditor(node, data) {

  956.       console.log(data, "adjklsajdlk");

  957.       this.frosasd = {

  958.         name: "",

  959.         endName: "",

  960.         isInterval: "",

  961.         id: "",

  962.         pid: "",

  963.         orgCode: "",

  964.         sort: "",

  965.         level: "",

  966.         desc: "",

  967.         mustSelected: 1,

  968.       };

  969.       if (data.isInterval == 0) {

  970.         this.frosasd.isInterval = 0;

  971.         this.frosasd.endName = data.endName;

  972.         this.treeList.forEach((item, index) => {

  973.           if (data.pid == item.id) {

  974.             this.amountintervalname = item.name;

  975.           }

  976.         });

  977.       } else {

  978.         this.amountintervalname = "";

  979.         this.frosasd.endName = "";

  980.         this.frosasd.isInterval = 1;

  981.       }

  982.       if (data.level == 1) {

  983.           this.frosasd.mustSelected = data.mustSelected;

  984.       }

  985.       this.frosasd.id = data.id;

  986.       this.frosasd.name = data.name;

  987.       this.frosasd.pid = data.pid;

  988.       this.frosasd.orgCode = data.orgCode;

  989.       this.frosasd.sort = data.sort;

  990.       this.frosasd.level = data.level;

  991.       this.frosasd.desc = data.desc;

  992.       this.isshowage = true;

  993.     },

  994.     //取消编辑

  995.     submicll() {

  996.       this.isshowage = false;

  997.     },

  998.     //编辑提交

  999.     submiadd() {

  1000.       if (this.frosasd.isInterval == 0) {

  1001.         if (Number(this.frosasd.name) > Number(this.frosasd.endName)) {

  1002.           this.$message({

  1003.             message: "第一个值必须小于第二个值，请检查！",

  1004.             type: "warning",

  1005.           });

  1006.           return;

  1007.         } else {

  1008.           this.infosubmiadd();

  1009.         }

  1010.       } else {

  1011.         this.infosubmiadd();

  1012.       }

  1013.     },

  1014.     zkhousePage() {

  1015.       this.$api.api

  1016.         .findHouseByUser({

  1017.           orgType: localStorage.getItem("orgType"),

  1018.         })

  1019.         .then((res) => {

  1020.           // console.log(res)

  1021.           this.houseList = res.data;

  1022.           if (localStorage.getItem("orgType") == 3) {

  1023.             this.houseId = localStorage.getItem("houseId");

  1024.           } else {

  1025.             this.houseId = res.data[0].id;

  1026.             this.orgCodes = res.data[0].orgCode;

  1027.           }

  1028.           // this.houseId = res.data[0].id;

  1029.           // 列表获取

  1030.           this.getHouse();

  1031.         });

  1032.     },

  1033.     infosubmiadd() {

  1034.       var that = this;

  1035.       axios({

  1036.         url: `/autoSR/zk/keywords/update`,

  1037.         method: "post",

  1038.         data: { ...this.frosasd, houseId: this.houseId },

  1039.       }).then((res) => {

  1040.         if (res.code == 0) {

  1041.           this.getHouse();

  1042.           that.isshowage = false;

  1043.           that.treeList.forEach((item, index) => {

  1044.             item.children.forEach((asd, indexesd) => {

  1045.               if (asd.id == that.frosasd.id) {

  1046.                 that.treeList[index].children[indexesd].name =

  1047.                   that.frosasd.name;

  1048.                 that.treeList[index].children[indexesd].endName =

  1049.                   that.frosasd.endName;

  1050.                 that.treeList[index].children[indexesd].id = res.data;

  1051.                 that.isshowage = false;

  1052.                 that.$message({

  1053.                   message: "修改成功",

  1054.                   type: "success",

  1055.                 });

  1056.                 return;

  1057.               } else {

  1058.                 asd.children.forEach((zxc, indexzxc) => {

  1059.                   if (zxc.id == that.frosasd.id) {

  1060.                     that.treeList[index].children[indexesd].children[

  1061.                       indexzxc

  1062.                     ].name = that.frosasd.name;

  1063.                     that.treeList[index].children[indexesd].children[

  1064.                       indexzxc

  1065.                     ].id = res.data;

  1066.                     that.isshowage = false;

  1067.                     that.$message({

  1068.                       message: "修改成功",

  1069.                       type: "success",

  1070.                     });

  1071.                     return;

  1072.                   }

  1073.                 });

  1074.               }

  1075.             });

  1076.           });

  1077.         } else {

  1078.           this.$message({

  1079.             message: "修改失败",

  1080.             type: "error",

  1081.           });

  1082.         }

  1083.       });

  1084.     },

  1085.   },

  1086. };

  1087. </script>

  1088. 

  1089. <style scoped="scoped" lang="scss" >

  1090. /deep/.el-tree-node__content {

  1091.   overflow: hidden;

  1092. }

  1093. .editDiv {

  1094.   width: 100%;

  1095.   min-height: 60px;

  1096.   max-height: 120px;

  1097.   overflow: auto;

  1098.   margin-bottom: 10px;

  1099.   padding: 15px;

  1100.   outline: none;

  1101.   border: 1px solid #409eff;

  1102.   border-radius: 10px;

  1103. }

  1104. .box-center {

  1105.   width: 100%;

  1106.   padding: 15px 15px 20px;

  1107.   min-width: 1000px;

  1108. }

  1109. #app {

  1110.   width: 100%;

  1111.   min-height: 100vh;

  1112.   background: #ffffff;

  1113.   box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);

  1114.   border-radius: 4px;

  1115.   padding-left: 15px;

  1116.   padding-bottom: 60px;

  1117. }

  1118. .addlevl {

  1119.   width: 100px;

  1120.   border: 1px solid #2671e2;

  1121.   color: #2671e2;

  1122.   text-align: center;

  1123.   line-height: 30rpx;

  1124.   border-radius: 4px;

  1125.   margin-top: 10px;

  1126.   margin-left: 18px;

  1127. }

  1128. .biaoti {

  1129.   font-size: 20px;

  1130.   font-family: PingFangSC-Semibold, PingFang SC;

  1131.   font-weight: 600;

  1132.   color: #32363d;

  1133.   line-height: 20px;

  1134.   padding-top: 25px;

  1135. }

  1136. .primary {

  1137.   width: 108px;

  1138.   height: 42px;

  1139.   background: #2671e2;

  1140. }

  1141. .custom-tree-node {

  1142.   flex: 1;

  1143.   display: flex;

  1144.   align-items: center;

  1145.   justify-content: space-between;

  1146.   font-size: 14px;

  1147.   padding-right: 183px;

  1148. }

  1149. .remove {

  1150.   color: red;

  1151. }

  1152. .editorcd {

  1153.   color: #2671e2;

  1154. }

  1155. .editorcd2 {

  1156.   color: #e6a12f;

  1157. }

  1158. .levelimg1 {

  1159.   width: 18px;

  1160.   height: 18px;

  1161. }

  1162. .levelimg2 {

  1163.   width: 16px;

  1164.   height: 16px;

  1165. }

  1166. .levelimg3 {

  1167.   width: 14px;

  1168.   height: 14px;

  1169. }

  1170. .app-titel {

  1171.   width: 100%;

  1172.   display: flex;

  1173.   align-items: center;

  1174.   .label {

  1175.     font-size: 14px;

  1176.     font-weight: 400;

  1177.     color: #32363d;

  1178.     line-height: 14px;

  1179.     margin-left: 15px;

  1180.   }

  1181.   .toptimeqhuan {

  1182.     height: 30px;

  1183.     background: #ffffff;

  1184.     display: flex;

  1185.     align-items: center;

  1186.   }

  1187.   .toptimeqhuan div {

  1188.     padding-left: 20px;

  1189.     padding-right: 20px;

  1190.     text-align: center;

  1191.     line-height: 30px;

  1192.     font-size: 14px;

  1193.     margin-right: 15px;

  1194.     border-radius: 4px;

  1195.     border: 1px solid #e0e0e0;

  1196.   }

  1197. }

  1198. /deep/ .el-dialog--center {

  1199.   border-radius: 8px;

  1200.   .el-dialog__title {

  1201.     font-weight: bold;

  1202.   }

  1203. }

  1204. /deep/ .el-button--primary {

  1205.   background: #2671e2 !important;

  1206.   border: 1px solid #2671e2 !important;

  1207. }

  1208. /deep/ .el-button--text {

  1209.   color: #2671e2;

  1210. }

  1211. 

  1212. .itemlist {

  1213.   display: flex;

  1214.   justify-content: space-between;

  1215.   align-items: center;

  1216.   margin: 20px 0;

  1217. }

  1218. .item-input {

  1219.   width: 100%;

  1220.   padding: 4px 10px;

  1221.   outline: none;

  1222.   border: 1px solid #409eff;

  1223.   border-radius: 4px;

  1224.   overflow: auto;

  1225.   line-height: 24px;

  1226.   min-height: 24px;

  1227.   max-height: 100px;

  1228.   margin: 0 10px;

  1229. }

  1230. </style>