feat：订阅设置

src/api/modules/subscribe.js

@@ -75,3 +75,13 @@ export function updateMatchType (data) {
     data: data
   })
 }
+
+// 订阅关键词修改（换成超级订阅）
+export function setUserInfoVip (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/subscribepay/afterPay/setUserInfo',
+    method: 'post',
+    data: data
+  })
+}

src/components/selector/BuyerclassSelectorContent.vue

@@ -20,10 +20,36 @@
               active: cate.selected,
               [cate.id]: true
             }"
-            @click="changeCateState($event,cate)">{{ cate.name }}</button>
+            @click="changeCateState($event,cate)">{{ cate.name }}
+            </button>
+            <button
+              :class="{
+                active: notClass.selected,
+                [notClass.id]: true
+              }"
+              class="j-button-item"
+              v-if="item[0].name === '全部'"
+              @click="changeCateState($event,notClass)"
+            >匹配未分类行业</button>
+            <img class="icon-quesion" src="@/assets/images/icon/question.png" v-if="item[0].name === '全部'" @click="dialogTip = true" />
         </div>
       </div>
     </div>
+    <el-dialog
+      custom-class="buyer-dialog"
+      title="匹配未分类行业"
+      :visible.sync="dialogTip"
+      width="24%"
+      center
+      :show-close="false"
+      append-to-body
+      >
+      <p style="font-size:14px;color:#1D1D1D;line-height:22px;">每条信息的采购单位行业属性由机器自动识别，会存在少数无法识别进行分类的情况。</p>
+      <p style="margin-top:4px;font-size:14px;color:#686868;line-height:22px;">注：选择全部行业时，未分类行业默认被选中，关闭无效</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button style="background: #2cb7ca;border-radius: 6px;border:0;" type="primary" @click="dialogTip = false">我知道了</el-button>
+      </span>
+    </el-dialog>
   </div>
   <div class="selector-content" :class="{ 'no-more': !showMore }" v-else-if="selectorType === 'line'" key="s-content">
     <span class="action-button show-more" @click="showMore = !showMore">
@@ -51,13 +77,15 @@
 </template>
 
 <script>
-import { Input } from 'element-ui'
+import { Input, Dialog, Button } from 'element-ui'
 import { cateListMapExp } from '@/assets/js/selector.js'
 import { debounce, getRandomString } from '@/utils/'
 export default {
   name: 'buyerclass-selector-content',
   components: {
-    [Input.name]: Input
+    [Input.name]: Input,
+    [Dialog.name]: Dialog,
+    [Button.name]: Button
   },
   props: {
     selectorType: {
@@ -86,7 +114,14 @@ export default {
       },
       // indexBar数据
       indexList: [],
-      showMore: false
+      showMore: false,
+      dialogTip: false,
+      notClass: {
+        id: 'bc-ppwfl',
+        level: 1,
+        name: '匹配未分类',
+        selected: true
+      }
     }
   },
   watch: {
@@ -257,9 +292,16 @@ export default {
       .select-group {
         display: flex;
         flex-wrap: wrap;
+        align-items: center;
         margin: 0 16px;
       }
     }
+    .icon-quesion{
+      width: 18px;
+      height: 18px;
+      margin-left: 2px;
+      cursor: pointer;
+    }
   }
 
   .s-line {

src/utils/bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+const $bus = new Vue()
+export default $bus

src/views/portrayal/EntSearchPortrayal.vue

@@ -15,7 +15,7 @@
           <EntSubVipForm :id="eId" @entname="entname"></EntSubVipForm>
           <EntHistoryForm v-if="showEntHistoryForm" :id="eId"></EntHistoryForm>
           <div class="ent-big-upgrade-group" v-else>
-            <MaskCard @click="openBigPage(getHistoryData)" k="企业情报历史记录" :item="EntHistoryTip"></MaskCard>
+            <MaskCard @click="openBigPage(EntHistoryTip)" k="企业情报历史记录" :item="EntHistoryTip"></MaskCard>
           </div>
         </div>
         <div id="chartInfo" class="tab-content-item">
@@ -228,11 +228,11 @@ export default {
           }
         } else {
           if (tempPagePowerInfo.total <= tempPagePowerInfo.usage && info.viper) {
-            if (tempPagePowerInfo.provin == 0) {
+            if (tempPagePowerInfo.provin === 0) {
               tempButton = '去开通'
-            } else if (tempPagePowerInfo.provin != -1) {
+            } else if (tempPagePowerInfo.provin !== -1) {
               tempButton = v === '项目动态' ? '去升级' : '免费体验'
-            } else if(tempPagePowerInfo.provin == -1) {
+            } else if (tempPagePowerInfo.provin === -1) {
               tempButton = v === '项目动态' ? '联系客服' : '免费体验'
             }
           } else if (info.vipStatus > 0 && !info.viper) {

src/views/subscribe/Config.vue

@@ -5,15 +5,16 @@
     <!-- 关键词设置 -->
     <key-config ref="keyConfigRef" :datas="setData" @updateKey="updateKeyWordsApi"></key-config>
     <!-- 关键词列表 -->
-    <key-list v-if="setData.keyList.length > 0" :datas="setData" @updateKey="updateKeyWordsApi"></key-list>
+    <key-list v-if="setData.keyList.length > 0" ref="keyConfigRef" :datas="setData"></key-list>
   </div>
 </template>
 
 <script>
 import SubConfig from './components/key/SubConfig'
 import KeyConfig from './components/key/KeyConfig'
-import KeyList from './components/key/KeyList'
-import { getBigMemberInfo, updateKey } from '@/api/modules'
+import KeyList from './components/key/List'
+import { getBigMemberInfo, updateKey, setUserInfoVip } from '@/api/modules'
+import $bus from '@/utils/bus'
 export default {
   name: 'config',
   components: {
@@ -59,6 +60,11 @@ export default {
     }
     this.getBigInfo()
   },
+  mounted () {
+    $bus.$on('updateKey', (data) => {
+      this.updateKeyWordsApi(data)
+    })
+  },
   methods: {
     async getBigInfo () {
       const provinceArr = []
@@ -133,7 +139,7 @@ export default {
         console.log('状态值为：' + res.status)
       }
     },
-    // 子组件通知父组件更新关键词接口
+    // 子组件通知父组件更新关键词接口(大会员为全量提交，关键词修改使用超级订阅关键词接口提交)
     updateKeyWordsApi (data) {
       updateKey({
         a_items: data
@@ -143,7 +149,29 @@ export default {
             type: 'success',
             message: '操作成功'
           })
-          this.$refs.keyConfigRef.clearInputData()
+          // if (this.$refs.keyConfigRef) {
+          //   this.$refs.keyConfigRef.clearInputData()
+          // }
+          this.getBigInfo()
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.error_msg || '操作失败'
+          })
+          this.getBigInfo()
+        }
+      })
+    },
+    // 超级订阅关键词修改接口
+    vipSetUserInfo (data) {
+      setUserInfoVip({
+        pageType: data
+      }).then((res) => {
+        if (res.data.status === 1) {
+          this.$message({
+            type: 'success',
+            message: '操作成功'
+          })
           this.getBigInfo()
         } else {
           this.$message({
@@ -163,6 +191,15 @@ export default {
 </script>
 
 <style lang="scss">
+.buyer-dialog{
+  border-radius: 8px!important;
+}
+.sub-dialog{
+  border-radius: 5px;
+}
+.small-dialog{
+  border-radius: 8px;
+}
 .config{
   width: 1080px;
   margin: 32px auto 56px;

src/views/subscribe/components/key/Edit.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="edit-form">
+    <div class="input-box">
+      <div class="input-box-title">{{title}}</div>
+      <div class="item">
+        <div class="item-label">关键词：</div>
+        <div class="item-value">
+          <el-input
+            type="textarea"
+            autosize
+            resize="none"
+            placeholder="请输入关键词，多个关键词用空格隔开，例如：税务局 软件"
+            v-model="cur.key">
+          </el-input>
+        </div>
+      </div>
+      <div class="item">
+        <div class="item-label"></div>
+        <div class="item-value">
+          <div class="recommend">
+            <div class="recommend-title">
+              <span>相似订阅推荐</span>
+              <span class="batch-btn" @click="batchFn"><i class="el-icon-refresh"></i> 换一批</span>
+            </div>
+            <div class="recommend-main">
+              <div class="r-list"
+              :class="{active: s.selected}"
+              v-for="(s, j) in sameWordsList"
+              :key="'00' + j"
+              @click="addSameItem($event, s)">{{s.name}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="item-label">匹配模式：</div>
+        <div class="item-value">
+          <el-radio-group v-model="cur.mathway" @change="chooseMathWay($event)">
+            <el-radio name="matchway" :label="1">模糊<span class="math-tips">（任意1个关键词匹配成功即推送）</span></el-radio>
+            <el-radio  name="matchway" :label="0">精准<span class="math-tips">（同时包含所有关键词才推送）</span></el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="item" v-if="showNotWay" key="notway">
+        <div class="item-label item-label-required">排除词：</div>
+        <div class="item-value">
+          <el-input
+            type="textarea"
+            autosize
+            resize="none"
+            placeholder="请输入排除词，多个排除词用空格隔开，不希望接收，与关键词互斥"
+            v-model="cur.notkey">
+          </el-input>
+        </div>
+      </div>
+      <div class="item" v-else key="notway">
+        <div class="item-label"></div>
+        <div class="item-value">
+          <div class="add-words-btn" @click="showNotWay = true">+添加排除词（不希望接收，与关键词互斥）</div>
+        </div>
+      </div>
+      <div class="little-tips">当前匹配信息过少，请适当修改关键词</div>
+      <div>
+        <button type="button" :disabled="keyDisabled" class="confirm-btn" @click="submitKeywords">（近3个月内共匹配***条信息）</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Input, Button, RadioGroup, Radio } from 'element-ui'
+import $bus from '@/utils/bus'
+/* eslint-disable */
+Array.prototype.indexOf = function (val) {
+  for (var i = 0; i < this.length; i++) {
+    if (this[i] === val) return i
+  }
+  return -1
+}
+Array.prototype.remove = function (val) {
+  var index = this.indexOf(val)
+  if (index > -1) {
+    this.splice(index, 1)
+  }
+}
+/* eslint-disable */
+export default {
+  name: 'key-config',
+  props: {
+    datas: {
+      newWordsList: Array,
+      maxCount: Number
+    },
+    title: String,
+    keywords: Object,
+    classify: Object
+  },
+  components: {
+    [Input.name]: Input,
+    [Button.name]: Button,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio
+  },
+  data () {
+    return {
+      // 当前输入框的数据
+      cur: {
+        classify: '',
+        key: '',
+        appendkey: '',
+        notkey: '',
+        mathway: 0
+      },
+      showNotWay: false, // 是否展示添加排除词输入框
+      sameWordsList: [] // 相似推荐数据
+    }
+  },
+  computed: {
+    keyDisabled () {
+      return !this.cur.key
+    }
+  },
+  mounted () {
+    console.log(this.classify, this.keywords, 'cur')
+    if (this.keywords) {
+      this.cur.key = this.keywords.key.join(' ')
+    }
+    if (this.classify) {
+      this.cur.classify = this.classify.s_item
+    }
+    this.batchFn()
+  },
+  methods: {
+    chooseMathWay (state) {
+      console.log(state)
+    },
+    getArrRandom () {
+      const m = '计算机，软件，信息，技术，互联网，科技，建筑，交通工程，互联网医疗，医疗，学校，教育，招投标，政府办，法院，检察院，卫生系统，医院，化工，水泥，开发，绿化，动画，传媒，宣传，小猪佩奇，小猪乔治'
+      const arr = m.split('，')
+      const len = arr.length
+      for (let i = len - 1; i > 0; i--) {
+        const randomIndex = Math.floor(Math.random() * (i + 1))
+        const itemIndex = arr[randomIndex]
+        arr[randomIndex] = arr[i]
+        arr[i] = itemIndex
+      }
+      return arr
+    },
+    batchFn () {
+      const temp = this.getArrRandom()
+      const arrList = []
+      for (let i = 0; i < 10; i++) {
+        arrList.push({
+          selected: false,
+          name: temp[i]
+        })
+      }
+      const m = this.cur.key.split(' ')
+      m.forEach(v => {
+        arrList.forEach(s => {
+          if (v === s.name) {
+            s.selected = true
+          }
+        })
+      })
+      this.sameWordsList = arrList
+    },
+    addSameItem (e, item) {
+      item.selected = !item.selected
+      const m = this.cur.key.split(' ')
+      if (item.selected) {
+        m.push(item.name)
+        console.log(m)
+        this.cur.key = m.join(' ')
+      } else {
+        m.remove(item.name)
+        this.cur.key = m.join(' ')
+      }
+    },
+    // 保存数据
+    saveCurData () {
+      const data = this.datas.newWordsList
+      const obj = {
+        a_key: [
+          {
+            key: this.cur.key.split(' '),
+            notkey: this.cur.notkey,
+            appendkey: this.cur.appendkey
+          }
+        ],
+        s_item: this.cur.classify ? this.cur.classify : this.getNewClassName()
+      }
+      data.push(obj)
+      return data
+    },
+    // 提交关键词
+    submitKeywords () {
+      const totalCount = this.addTotalCount()
+      const classArr = this.getClassArray()
+      const keyArr = this.getKeyTotalArray()
+      console.log(totalCount, classArr, keyArr)
+      if (totalCount >= this.datas.maxCount) {
+        return this.$message({
+          type: 'warning',
+          message: '关键词超出最大限制'
+        })
+      }
+      if (classArr.indexOf(this.cur.classify) > -1) {
+        return this.$message({
+          type: 'warning',
+          message: '分类名不能重复'
+        })
+      }
+      if (keyArr.indexOf(this.cur.key) > -1) {
+        return this.$message({
+          type: 'warning',
+          message: '关键词不能重复'
+        })
+      }
+      // 判断附加词是否重复
+      if (this.getArrIsRepeat(this.cur.appendkey)) {
+        return this.$message({
+          type: 'warning',
+          message: '设置的附加词重复，请调整后再添加'
+        })
+      }
+      // 判断排除词是否重复
+      if (this.getArrIsRepeat(this.cur.notkey)) {
+        return this.$message({
+          type: 'warning',
+          message: '设置的排除词重复，请调整后再添加'
+        })
+      }
+      const params = this.saveCurData()
+      // 通知父组件发请求修改并更新
+      // this.$emit('updateKey', params)
+      $bus.$emit('updateKey', params)
+    },
+    // 添加附加词
+    addAttachWordsFn () {
+      const arr = this.cur.appendkey
+      if (this.inputIsEmpty(arr)) {
+        this.$message({
+          message: '请输入附加词',
+          type: 'warning'
+        })
+      } else {
+        this.cur.appendkey.push('')
+      }
+    },
+    // 添加排除词
+    addExcludeWordsFn () {
+      const arr = this.cur.notkey
+      if (this.inputIsEmpty(arr)) {
+        this.$message({
+          message: '请输入排除词',
+          type: 'warning'
+        })
+      } else {
+        this.cur.notkey.push('')
+      }
+    },
+    // 判断附加词排除词输入框是否有空
+    inputIsEmpty (arr) {
+      return arr.some((v) => !v)
+    },
+    // 获取所有分类名 用于判断是否重复
+    getClassArray () {
+      const classArr = []
+      this.datas.newWordsList.forEach((v) => {
+        if (v.s_item) {
+          classArr.push(v.s_item)
+        }
+      })
+      return classArr
+    },
+    // 获取所有关键词的key的属性，并返回一个数组(主要用于判断添加关键词是否重复)
+    getKeyTotalArray () {
+      const keysArr = []
+      this.datas.newWordsList.forEach((s) => {
+        if (s && s.a_key && Array.isArray(s.a_key)) {
+          s.a_key.forEach((v) => {
+            if (Array.isArray(v.key)) {
+              keysArr.push(v.key.toString().replace(',', ' '))
+            } else {
+              keysArr.push(v.key)
+            }
+          })
+        }
+      })
+      return keysArr
+    },
+    // 判断附加词、排除词是否重复
+    getArrIsRepeat (arr) {
+      this.removeEmptyInput(arr)
+      return (new Set(arr)).size !== arr.length
+    },
+    // 通过已有分类得到一个未分类名
+    getNewClassName () {
+      var conf = {
+        defaultT: '未分类',
+        reg: /^未分类(\d*)$/,
+        // 未分类名称数组
+        unclassified: [],
+        // 未分类名称数字数组
+        unclassifiedNum: [],
+        sortedArr: []
+      }
+      this.datas.newWordsList.forEach((item) => {
+        if (item.s_item && conf.reg.test(item.s_item)) {
+          let num = item.s_item.replace(new RegExp(conf.defaultT, 'g'), '')
+          num = parseInt(num)
+          if (isNaN(num)) {
+            num = 0
+          }
+          conf.unclassifiedNum.push(num)
+          conf.unclassified.push(item.s_item)
+        }
+      })
+      // 得到分类名
+      if (conf.unclassifiedNum.length === 0) {
+        return '未分类'
+      } else {
+        conf.sortedArr = conf.unclassifiedNum.sort(function (a, b) {
+          return b - a
+        })
+        return conf.defaultT + (conf.sortedArr[0] + 1)
+      }
+    },
+    // 清空输入框 供父组件请求成功后刷新
+    clearInputData () {
+      this.cur.classify = ''
+      this.cur.key = ''
+      this.cur.appendkey = ['']
+      this.cur.notkey = ['']
+    },
+    addTotalCount () {
+      let count = 0
+      this.datas.newWordsList.forEach(v => {
+        if (v && v.a_key) {
+          count += v.a_key.length
+        }
+      })
+      return count
+    },
+    removeEmptyInput (arr) {
+      for (let i = 0; i < arr.length; i++) {
+        // eslint-disable-next-line
+        if (arr[i] === '' || arr[i] === null || typeof (arr[i]) === undefined) {
+          arr.splice(i, 1)
+          i = i - 1
+        }
+      }
+      return arr
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.edit-form{
+  margin-top: 20px;
+  .classify-title{
+    padding-bottom: 20px;
+    .icon-edit,.icon-delete{
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      background-repeat: no-repeat;
+      background-position: center center;
+      cursor: pointer;
+    }
+    .icon-edit{
+      margin: 0 10px;
+      background-image: url('~@/assets/images/icon-edit.png');
+      background-size: contain;
+    }
+    .icon-delete{
+      background-image: url('~@/assets/images/icon-delete.png');
+      background-size: contain;
+    }
+  }
+  .input-box{
+    padding: 20px 30px;
+    background: #f6f7f9;
+    border-radius: 8px;
+  }
+  .input-box-title{
+    margin-bottom: 16px;
+    font-size: 16px;
+    text-align: center;
+    color: #1d1d1d;
+  }
+  .item{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+  }
+  .item-label{
+    margin-right: 8px;
+    min-width: 120px;
+    height: 40px;
+    color: #1d1d1d;
+    font-size: 14px;
+    line-height: 40px;
+    text-align: right;
+  }
+  .item-label-required:before{
+    content: "*";
+    color: #f56c6c;
+    margin-right: 2px;
+  }
+  .recommend{
+    padding: 16px;
+    background: #fff;
+    border-radius: 4px;
+    .recommend-title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #686868;
+      font-size: 14px;
+      .batch-btn{
+        color: #2cb7ca;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+    .recommend-main{
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      .r-list{
+        padding: 0 8px;
+        margin: 12px 8px 0;
+        height: 22px;
+        line-height: 22px;
+        background: #f5f6f7;
+        border-radius: 4px;
+        color: #1d1d1d;;
+        font-size: 14px;
+        cursor: pointer;
+      }
+      .active{
+        background: #2cb7ca;
+        color: #fff;
+      }
+    }
+  }
+  .add-words-btn{
+    width: 352px;
+    height: 40px;
+    line-height: 40px;
+    border: 1px dashed #2cb7ca;
+    border-radius: 6px;
+    background: #fff;
+    color: #2cb7ca;
+    text-align: center;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  .little-tips{
+    margin-top: 20px;
+    height: 32px;
+    line-height: 32px;
+    background: rgba(255, 159, 64,0.1);
+    border-radius: 4px;
+    color: #ff9f40;
+    font-size: 13px;
+    text-align: center;
+  }
+  .item-value{
+    flex: 1;
+  }
+  .custom-long-input{
+    width: 352px;
+  }
+  .custom-short-input{
+    width: 170px;
+  }
+  .item-other{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+  }
+  .item-other-value{
+    margin-top: 8px;
+  }
+  .math-tips{
+    margin-top: 4px;
+    font-size: 12px;
+    color: #999999;
+    line-height: 20px;
+  }
+  .radio-item{
+    margin-bottom: 10px;
+  }
+  .item-keywords-value{
+    display: flex;
+    justify-content: space-between;
+  }
+  .add-tag{
+    width: 170px;
+    height: 40px;
+    line-height: 40px;
+    color: #2cb7ca;
+    border-radius: 6px;
+    text-align: center;
+    cursor: pointer;
+    color: #2cb7ca;
+    border: 1px dashed #2cb7ca;
+  }
+  .add-word-list{
+    margin-bottom: 6px;
+  }
+  .confirm-btn{
+    display: block;
+    width: 352px;
+    height: 46px;
+    margin: 20px auto 0;
+    line-height: 46px;
+    font-size: 16px;
+    background: #2cb7ca;
+    border-radius: 6px;
+    color: #fff;
+    cursor: pointer;
+    &:disabled{
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  .keywords-help{
+    width: 412px;
+    margin-top: 20px;
+    font-size: 12px;
+    color: #999999;
+    line-height: 20px;
+    text-align: justify;
+  }
+}
+// element-ui样式修改
+::v-deep {
+  .el-input__inner,
+  .el-textarea__inner{
+    font-size: 14px;
+    color: #1D1D1D;
+    border-color: #ececec;
+  }
+  .el-textarea__inner{
+    padding: 8px 15px;
+  }
+  .el-input__inner:hover,
+  .el-textarea__inner:hover{
+    border-color: #ececec;
+  }
+  .el-input__inner:focus,
+  .el-textarea__inner:focus{
+    border-color: #2cb7ca;
+  }
+  .el-radio{
+    color: #1d1d1d;
+    font-size: 14px;
+  }
+  .el-radio__inner{
+    width: 20px;
+    height: 20px;
+  }
+  .el-radio__input.is-checked .el-radio__inner{
+    border: 0;
+    background: transparent;
+    width: 20px;
+    height: 20px;
+    background: url('~@/assets/images/icon-checked.png') no-repeat center center;
+    background-size: contain;
+  }
+  .el-radio__inner::after{
+    background: transparent;
+  }
+  .el-radio__input.is-checked+.el-radio__label{
+    color: #1d1d1d;
+  }
+  .el-radio__inner:hover{
+    border-color: #ececec;
+  }
+}
+</style>

src/views/subscribe/components/key/KeyConfig.vue

@@ -1,56 +1,52 @@
 <template>
   <div class="keywords">
     <div class="key-title">
-      <span>{{datas.title}}</span>
-      <span style="font-size:14px;"><em style="color: #2cb7ca;"> {{keyCounts}}</em>/{{datas.maxCount}}</span>
+      <div>
+        <span>{{datas.title}}</span>
+        <span style="font-size:14px;"><em style="color: #2cb7ca;"> {{keyCounts}}</em>/{{datas.maxCount}}</span>
+        <span style="font-size:14px;color: #2cb7ca;margin-left:16px;">注：任意1组关键词组匹配成功即推送相关信息</span>
+      </div>
+      <div class="add-classfily"><i class="el-icon-plus" @clcik="addClassfilyFn"></i> 新增分类</div>
     </div>
     <div class="key-content">
-      <div class="item">
-        <div class="item-label">关键词分类：</div>
-        <div class="item-value">
-          <el-input class="custom-long-input" v-model.trim="cur.classify" maxlength="20" placeholder="请输入关键词分类"></el-input>
-        </div>
-      </div>
-      <div class="item">
-        <div class="item-label item-label-required">关键词：</div>
-        <div class="item-value">
-          <el-input class="custom-long-input" v-model="cur.key" maxlength="20" placeholder="请输入关键词"></el-input>
+      <div v-if="datas.keyList.length === 0">
+        <div class="classify-title">
+          <span class="title-text">未分类</span>
+          <span class="icon-edit" @click="editClassFn('未分类')"></span>
+          <span class="icon-delete" @click="deleteClassFn()"></span>
         </div>
+        <Edit :datas="datas" title="新增关键词组"></Edit>
       </div>
-      <div class="item">
-        <div class="item-label"></div>
-        <div class="item-value item-keywords-value">
-          <div>
-            <div class="add-word-list" v-for="(add,index) in cur.appendkey" :key="'add' + index">
-              <el-input v-model.trim="cur.appendkey[index]" class="custom-short-input" maxlength="20" placeholder="请输入附加词"></el-input>
-            </div>
-            <div class="add-tag" @click="addAttachWordsFn">+添加附加词</div>
-          </div>
-          <div>
-            <div class="add-word-list" v-for="(not,index) in cur.notkey" :key="'0' + index">
-              <el-input v-model.trim="cur.notkey[index]" class="custom-short-input" maxlength="20" placeholder="请输入排除词"></el-input>
+    </div>
+    <!-- 修改分类dialog -->
+    <el-dialog
+      custom-class="sub-dialog"
+      :visible.sync="dialog.editClass"
+      :close-on-click-modal="false"
+      :show-close="false"
+      center
+      width="800px"
+      v-if="dialog.editClass"
+    >
+      <KeyCard @onCancel="dialog.editClass = false" @onConfirm="confirmEditClassFn">
+        <div slot="header">修改关键词分类</div>
+        <div class="class-edit-content">
+          <div class="item">
+            <div class="item-label">关键词分类：</div>
+            <div class="item-value">
+              <el-input class="custom-long-input" v-model.trim="className"  maxlength="20" placeholder="请输入关键词分类"></el-input>
             </div>
-            <div class="add-tag" @click="addExcludeWordsFn">+添加排除词</div>
           </div>
         </div>
-      </div>
-      <div class="item">
-        <div class="item-label"></div>
-        <div class="item-value">
-          <button type="button" :disabled="keyDisabled" class="save-btn" @click="submitKeywords">保存关键词</button>
-          <div class="keywords-help">
-            <p>例：某公司主管业务为软件系统开发 </p>
-            <p>关键词：目标信息钟的关键性词语，如“软件系统” </p>
-            <p>附加词：与关键词形成一体/组合，便于查找准确信息，如“开发”</p>
-            <p>排除词：与关键词互斥，可排除一部分非目标信息，如“运维”</p>
-          </div>
-        </div>
-      </div>
-    </div>
+      </KeyCard>
+    </el-dialog>
   </div>
 </template>
 <script>
-import { Input, Button } from 'element-ui'
+import { Input, Button, Dialog, RadioGroup, Radio } from 'element-ui'
+import KeyCard from '@/components/selector/SelectorCard'
+import Edit from './Edit'
+import $bus from '@/utils/bus'
 export default {
   name: 'key-config',
   props: {
@@ -62,17 +58,19 @@ export default {
   },
   components: {
     [Input.name]: Input,
-    [Button.name]: Button
+    [Dialog.name]: Dialog,
+    [Button.name]: Button,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio,
+    KeyCard,
+    Edit
   },
   data () {
     return {
-      // 当前输入框的数据
-      cur: {
-        classify: '',
-        key: '',
-        appendkey: [''],
-        notkey: ['']
-      }
+      dialog: {
+        editClass: false
+      },
+      curClass: ''
     }
   },
   computed: {
@@ -84,186 +82,46 @@ export default {
         }
       })
       return count
-    },
-    keyDisabled () {
-      return !this.cur.key
     }
   },
   mounted () {},
   methods: {
-    // 保存数据
-    saveCurData () {
-      const data = this.datas.keyList
-      const obj = {
-        a_key: [
-          {
-            key: this.cur.key.split(' '),
-            notkey: this.cur.notkey,
-            appendkey: this.cur.appendkey
-          }
-        ],
-        s_item: this.cur.classify ? this.cur.classify : this.getNewClassName()
-      }
-      data.push(obj)
-      return data
+    addClassfilyFn () {},
+    editClassFn (str) {
+      this.dialog.editClass = true
+      this.className = str
     },
-    // 提交关键词
-    submitKeywords () {
-      const totalCount = this.addTotalCount()
+    deleteClassFn () {
+      this.$message('没有关键词组不能删除')
+    },
+    // 确认修改分类
+    confirmEditClassFn () {
+      const data = JSON.parse(JSON.stringify(this.datas.keyList))
       const classArr = this.getClassArray()
-      const keyArr = this.getKeyTotalArray()
-      if (totalCount >= this.datas.maxCount) {
-        return this.$message({
-          type: 'warning',
-          message: '关键词超出最大限制'
-        })
-      }
-      if (classArr.indexOf(this.cur.classify) > -1) {
+      if (classArr.indexOf(this.className) > -1) {
         return this.$message({
           type: 'warning',
           message: '分类名不能重复'
         })
-      }
-      if (keyArr.indexOf(this.cur.key) > -1) {
-        return this.$message({
-          type: 'warning',
-          message: '关键词不能重复'
-        })
-      }
-      // 判断附加词是否重复
-      if (this.getArrIsRepeat(this.cur.appendkey)) {
-        return this.$message({
-          type: 'warning',
-          message: '设置的附加词重复，请调整后再添加'
-        })
-      }
-      // 判断排除词是否重复
-      if (this.getArrIsRepeat(this.cur.notkey)) {
+      } else if (this.className === '') {
         return this.$message({
           type: 'warning',
-          message: '设置的排除词重复，请调整后再添加'
-        })
-      }
-      const params = this.saveCurData()
-      // 通知父组件发请求修改并更新
-      this.$emit('updateKey', params)
-    },
-    // 添加附加词
-    addAttachWordsFn () {
-      const arr = this.cur.appendkey
-      if (this.inputIsEmpty(arr)) {
-        this.$message({
-          message: '请输入附加词',
-          type: 'warning'
-        })
-      } else {
-        this.cur.appendkey.push('')
-      }
-    },
-    // 添加排除词
-    addExcludeWordsFn () {
-      const arr = this.cur.notkey
-      if (this.inputIsEmpty(arr)) {
-        this.$message({
-          message: '请输入排除词',
-          type: 'warning'
+          message: '分类名不能为空'
         })
-      } else {
-        this.cur.notkey.push('')
       }
+      $bus.$emit('updateKey', data)
+      this.dialog.editClass = false
     },
-    // 判断附加词排除词输入框是否有空
-    inputIsEmpty (arr) {
-      return arr.some((v) => !v)
-    },
-    // 获取所有分类名 用于判断是否重复
+    // 获取所有分类名
     getClassArray () {
+      const data = JSON.parse(JSON.stringify(this.datas.keyList))
       const classArr = []
-      this.datas.keyList.forEach((v) => {
+      data.forEach((v) => {
         if (v.s_item) {
           classArr.push(v.s_item)
         }
       })
       return classArr
-    },
-    // 获取所有关键词的key的属性，并返回一个数组(主要用于判断添加关键词是否重复)
-    getKeyTotalArray () {
-      const keysArr = []
-      this.datas.keyList.forEach((s) => {
-        if (s && s.a_key && Array.isArray(s.a_key)) {
-          s.a_key.forEach((v) => {
-            if (Array.isArray(v.key)) {
-              keysArr.push(v.key.toString().replace(',', ' '))
-            } else {
-              keysArr.push(v.key)
-            }
-          })
-        }
-      })
-      return keysArr
-    },
-    // 判断附加词、排除词是否重复
-    getArrIsRepeat (arr) {
-      this.removeEmptyInput(arr)
-      return (new Set(arr)).size !== arr.length
-    },
-    // 通过已有分类得到一个未分类名
-    getNewClassName () {
-      var conf = {
-        defaultT: '未分类',
-        reg: /^未分类(\d*)$/,
-        // 未分类名称数组
-        unclassified: [],
-        // 未分类名称数字数组
-        unclassifiedNum: [],
-        sortedArr: []
-      }
-      this.datas.keyList.forEach((item) => {
-        if (item.s_item && conf.reg.test(item.s_item)) {
-          let num = item.s_item.replace(new RegExp(conf.defaultT, 'g'), '')
-          num = parseInt(num)
-          if (isNaN(num)) {
-            num = 0
-          }
-          conf.unclassifiedNum.push(num)
-          conf.unclassified.push(item.s_item)
-        }
-      })
-      // 得到分类名
-      if (conf.unclassifiedNum.length === 0) {
-        return '未分类'
-      } else {
-        conf.sortedArr = conf.unclassifiedNum.sort(function (a, b) {
-          return b - a
-        })
-        return conf.defaultT + (conf.sortedArr[0] + 1)
-      }
-    },
-    // 清空输入框 供父组件请求成功后刷新
-    clearInputData () {
-      this.cur.classify = ''
-      this.cur.key = ''
-      this.cur.appendkey = ['']
-      this.cur.notkey = ['']
-    },
-    addTotalCount () {
-      let count = 0
-      this.datas.keyList.forEach(v => {
-        if (v && v.a_key) {
-          count += v.a_key.length
-        }
-      })
-      return count
-    },
-    removeEmptyInput (arr) {
-      for (let i = 0; i < arr.length; i++) {
-        // eslint-disable-next-line
-        if (arr[i] === '' || arr[i] === null || typeof (arr[i]) === undefined) {
-          arr.splice(i, 1)
-          i = i - 1
-        }
-      }
-      return arr
     }
   }
 }
@@ -271,111 +129,63 @@ export default {
 <style lang="scss" scoped>
 .keywords{
   .key-title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding-bottom: 8px;
     font-size: 18px;
     color: #1d1d1d;
     line-height: 28px;
     border-bottom: 1px solid #ececec;
+    .add-classfily{
+      width: 110px;
+      height: 38px;
+      line-height: 38px;
+      border: 1px solid #2cb7ca;
+      border-radius: 6px;
+      text-align: center;
+      color: #2CB7CA;
+      font-size: 14px;
+      cursor: pointer;
+    }
   }
   .key-content{
     padding: 20px 0;
-    .item{
+    .classify-title{
       display: flex;
       align-items: center;
-      justify-content: center;
-      margin-bottom: 10px;
-    }
-    .item-label{
-      margin-right: 8px;
-      min-width: 120px;
-      height: 40px;
-      color: #1d1d1d;
-      font-size: 14px;
-      line-height: 40px;
-      text-align: right;
-    }
-    .item-label-required:before{
-      content: "*";
-      color: #f56c6c;
-      margin-right: 2px;
-    }
-    .item-value{
-      width: 352px;
-    }
-    .custom-long-input{
-      width: 352px;
-    }
-    .custom-short-input{
-      width: 170px;
-    }
-    .item-other{
-      display: flex;
-      justify-content: center;
-      margin-bottom: 10px;
-    }
-    .item-other-value{
-      margin-top: 8px;
-    }
-    .math-tips{
-      margin-top: 4px;
-      font-size: 12px;
-      color: #999999;
-      line-height: 20px;
-    }
-    .radio-item{
-      margin-bottom: 10px;
-    }
-    .item-keywords-value{
-      display: flex;
-      justify-content: space-between;
-    }
-    .add-tag{
-      width: 170px;
-      height: 40px;
-      line-height: 40px;
-      color: #2cb7ca;
-      border-radius: 6px;
-      text-align: center;
-      cursor: pointer;
-      color: #2cb7ca;
-      border: 1px dashed #2cb7ca;
-    }
-    .add-word-list{
-      margin-bottom: 6px;
-    }
-    .save-btn{
-      width: 352px;
-      height: 46px;
-      line-height: 46px;
-      font-size: 16px;
-      background: #2cb7ca;
-      border-radius: 6px;
-      color: #fff;
-      &:disabled{
-        opacity: 0.5;
-        cursor: not-allowed;
+      .title-text{
+        font-size: 16px;
+        color: #1d1d1d;
+      }
+      .icon-edit,.icon-delete{
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background-repeat: no-repeat;
+        background-position: center center;
+        cursor: pointer;
+      }
+      .icon-edit{
+        margin: 0 10px;
+        background-image: url('~@/assets/images/icon-edit.png');
+        background-size: contain;
+      }
+      .icon-delete{
+        background-image: url('~@/assets/images/icon-delete.png');
+        background-size: contain;
       }
     }
-    .keywords-help{
-      width: 412px;
-      margin-top: 20px;
-      font-size: 12px;
-      color: #999999;
-      line-height: 20px;
-      text-align: justify;
+    .key-edit-content,.class-edit-content{
+      width: 740px;
+      padding: 30px 0;
+      height: auto;
+      max-height: 340px;
+      margin: 0 auto;
+      border: 1px solid #ececec;
+      overflow-y: scroll;
+      box-sizing: border-box;
     }
   }
-  // element-ui样式修改
-  ::v-deep.el-input__inner{
-    font-size: 14px;
-    color: #1D1D1D;
-    border-color: #ececec;
-  }
-  ::v-deep.el-input__inner:hover{
-    border-color: #ececec;
-  }
-  ::v-deep.el-input__inner:focus{
-    border-color: #2cb7ca;
-  }
 }
 </style>

src/views/subscribe/components/key/KeyEdit.vue

@@ -1,164 +0,0 @@
-<template>
-  <div class="keywords-edit">
-    <div class="item">
-      <div class="item-label">关键词分类：</div>
-      <div class="item-value">{{datas.className}}</div>
-    </div>
-    <div class="item">
-      <div class="item-label item-label-required">关键词：</div>
-      <div class="item-value">
-        <el-input class="custom-long-input" v-model="cur.key" maxlength="20" placeholder="请输入关键词"></el-input>
-      </div>
-    </div>
-    <div class="item">
-      <div class="item-label"></div>
-      <div class="item-value item-keywords-value">
-        <div>
-          <div class="add-word-list" v-for="(add,index) in cur.appendkey" :key="'add' + index">
-            <el-input v-model.trim="cur.appendkey[index]" class="custom-short-input" maxlength="20" placeholder="请输入附加词"></el-input>
-          </div>
-          <div class="add-tag" @click="addAppendKey">+添加附加词</div>
-        </div>
-        <div>
-          <div class="add-word-list" v-for="(not,index) in cur.notkey" :key="'0' + index">
-            <el-input v-model.trim="cur.notkey[index]" class="custom-short-input" maxlength="20" placeholder="请输入排除词"></el-input>
-          </div>
-          <div class="add-tag" @click="addNotKey">+添加排除词</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { Input } from 'element-ui'
-export default {
-  name: 'keywords-edit',
-  components: {
-    [Input.name]: Input
-  },
-  props: {
-    datas: {
-      ways: String,
-      className: String,
-      key: Array,
-      notkey: Array,
-      appendkey: Array
-    }
-  },
-  data () {
-    return {
-      cur: {
-        key: '',
-        appendkey: [],
-        notkey: []
-      }
-    }
-  },
-  watch: {},
-  computed: {},
-  created () {
-    this.getParentData()
-  },
-  mounted () {},
-  methods: {
-    // 获取父组件keyList传来的数据 并进行格式转化渲染到输入框
-    getParentData () {
-      const datas = JSON.parse(JSON.stringify(this.datas))
-      this.cur.key = datas.key.join(' ')
-      this.cur.notkey = datas.notkey
-      this.cur.appendkey = datas.appendkey
-    },
-    addAppendKey () {
-      const arr = this.cur.appendkey
-      if (this.inputIsEmpty(arr)) {
-        this.$message({
-          message: '请输入附加词',
-          type: 'warning'
-        })
-      } else {
-        this.cur.appendkey.push('')
-      }
-    },
-    addNotKey () {
-      const arr = this.cur.notkey
-      if (this.inputIsEmpty(arr)) {
-        this.$message({
-          message: '请输入排除词',
-          type: 'warning'
-        })
-      } else {
-        this.cur.notkey.push('')
-      }
-    },
-    inputIsEmpty (arr) {
-      return arr.some((v) => !v)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.keywords-edit{
-  .item{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-  }
-  .item-label{
-    margin-right: 8px;
-    min-width: 120px;
-    height: 40px;
-    color: #1d1d1d;
-    font-size: 14px;
-    line-height: 40px;
-    text-align: right;
-  }
-  .item-label-required:before{
-    content: "*";
-    color: #f56c6c;
-    margin-right: 2px;
-  }
-  .item-value{
-    width: 352px;
-  }
-  .custom-long-input{
-    width: 352px;
-  }
-  .custom-short-input{
-    width: 170px;
-  }
-  .item-keywords-value{
-    display: flex;
-    justify-content: space-between;
-  }
-  .add-tag{
-    width: 170px;
-    height: 40px;
-    line-height: 40px;
-    color: #2cb7ca;
-    border-radius: 6px;
-    text-align: center;
-    cursor: pointer;
-    color: #2cb7ca;
-    border: 1px dashed #2cb7ca;
-  }
-  .add-word-list{
-    margin-bottom: 6px;
-  }
-  // element-ui样式修改
-  ::v-deep.el-input__inner{
-    font-size: 14px;
-    color: #1D1D1D;
-    border-color: #ececec;
-    padding-left: 16px!important;
-    border-radius: 6px!important;
-    background: #fff!important;
-  }
-  ::v-deep.el-input__inner:hover{
-    border-color: #ececec;
-  }
-  ::v-deep.el-input__inner:focus{
-    border-color: #2cb7ca;
-  }
-}
-</style>

src/views/subscribe/components/key/KeyList.vue → src/views/subscribe/components/key/List.vue

@@ -1,29 +1,32 @@
 <template>
   <div class="classify">
-    <div class="classify-list" v-for="(item,index) in datas.keyList" :key="'1' + index">
+    <div class="classify-list" v-for="(item,index) in trans.newWordsList" :key="'1' + index">
       <div class="classify-title">
         <span class="title-text">{{item.s_item}}</span>
         <span class="icon-edit" @click="editClassFn(item.s_item, index)"></span>
         <span class="icon-delete" @click="deleteClassFn(item.s_item, index)"></span>
       </div>
       <div class="classify-content">
-        <div class="list" v-for="(v, i) in item.a_key" :key="'2' + i">
-          <div class="list-box">
-            <div class="list-value">
-              <p>关键词: {{v.key.join(' ') || '--'}}</p>
-              <p>附加词: {{v.appendkey.join('、') || '--'}}</p>
-              <p>排除词: {{v.notkey.join('、') || '--'}}</p>
+        <div class="add-words-box" @click="addNewKeyword(item, index)" v-if="!item.showForm" key="add">+新增关键词</div>
+        <div style="width:100%;" v-else key="add">
+          <Edit :datas="trans" title="新增关键词组"></Edit>
+        </div>
+        <div v-for="(v, i) in item.a_key" :key="'2' + i" style="width:100%;">
+          <Edit :datas="trans" title="修改关键词组" :classify="item" :keywords="v" v-if="v.showForm" key="edit"></Edit>
+          <div class="words-list" v-else key="edit">
+            <div class="list-left yellow-box" v-if="v.matchway">模糊</div>
+            <div class="list-left blue-box" v-else>精准</div>
+            <div class="list-middle">
+              <div class="list-keywords">{{v.key.join(' ')}}</div>
+              <p class="list-addkey" v-if="v.appendkey && v.appendkey.length > 0">附加词: {{v.appendkey.join(' ')}}</p>
+              <p class="list-notkey" v-if="v.notkey && v.notkey.length > 0">排除词: {{v.notkey.join(' ')}}</p>
             </div>
-            <div class="list-icon" @click="deleteKeyFn(index, i)"></div>
-            <div class="list-edit" @click="editKeyFn(item, v, index, i)">
-              编辑
-              <i class="tri-down"></i>
+            <div class="list-right">
+              <span class="icon-edit" @click="editKeyFn(item, v, index, i)"></span>
+              <span class="icon-delete" @click="deleteKeyFn(index, i)"></span>
             </div>
           </div>
         </div>
-        <div class="words-add" @click="addKeyFn(item.s_item)">
-          <i class="el-icon-plus"></i>
-        </div>
       </div>
     </div>
     <!-- 修改分类dialog -->
@@ -69,7 +72,7 @@
       </div>
     </el-dialog>
     <!-- 关键词dialog -->
-    <el-dialog
+    <!-- <el-dialog
       custom-class="sub-dialog"
       :visible.sync="dialog.editKey"
       :close-on-click-modal="false"
@@ -84,13 +87,34 @@
           <KeyEdit ref="keyEditRef" :datas="props"></KeyEdit>
         </div>
       </KeyCard>
+    </el-dialog> -->
+    <!-- 删除关键词dialog -->
+    <el-dialog
+      custom-class="sub-dialog small-dialog"
+      :visible.sync="dialog.delKey"
+      :close-on-click-modal="false"
+      :show-close="false"
+      top="30vh"
+      center
+      width="380px"
+      v-if="dialog.delKey"
+    >
+      <div class="delete-class">
+        <div class="delete-class-header">删除关键词组</div>
+        <div class="delete-class-content">确定删除该关键词组吗？</div>
+        <div class="delete-class-footer">
+          <el-button type="primary" class="confirm" @click="confirmDeleteKeyFn">确定</el-button>
+          <el-button class="cancel" @click="dialog.delKey = false">取消</el-button>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 <script>
 import { Tooltip, Dialog, Input, Button } from 'element-ui'
 import KeyCard from '@/components/selector/SelectorCard'
-import KeyEdit from './KeyEdit'
+import Edit from './Edit'
+import $bus from '@/utils/bus'
 export default {
   name: 'keywords-list',
   components: {
@@ -99,7 +123,7 @@ export default {
     [Input.name]: Input,
     [Button.name]: Button,
     KeyCard,
-    KeyEdit
+    Edit
   },
   props: {
     datas: {
@@ -112,7 +136,8 @@ export default {
       dialog: {
         editClass: false, // 修改分类弹框
         delClass: false, // 删除分类弹框
-        editKey: false // 修改关键词弹框
+        editKey: false, // 修改关键词弹框
+        delKey: false // 删除关键词
       },
       // 传给dialog子组件的数据
       props: {
@@ -123,12 +148,36 @@ export default {
         key: [], // 关键词
         notkey: [], // 排除词
         appendkey: [] // 附加词
+      },
+      trans: {
+        newWordsList: [], // 将父组件传来的数据赋值给该变量
+        maxCount: 0
       }
     }
   },
   computed: {},
-  mounted () {},
+  watch: {
+    'datas.keyList': function (newVal) {
+      if (newVal) {
+        this.formatDatasList()
+      }
+    }
+  },
+  mounted () {
+    this.formatDatasList()
+  },
   methods: {
+    formatDatasList () {
+      const lists = JSON.parse(JSON.stringify(this.datas.keyList))
+      lists.forEach(v => {
+        v.showForm = false
+        v.a_key.forEach(s => {
+          s.showForm = false
+        })
+      })
+      this.trans.newWordsList = lists
+      this.trans.maxCount = this.datas.maxCount
+    },
     // 取消编辑弹框
     cancleEdit () {
       this.dialog.editKey = false
@@ -159,8 +208,15 @@ export default {
           v.s_item = this.props.className
         }
       })
-      this.$emit('updateKey', data)
+      // this.$emit('updateKey', data)
+      $bus.$emit('updateKey', data)
       this.dialog.editClass = false
+      // this.$forceUpdate()
+    },
+    // 新增关键词
+    addNewKeyword (item, index) {
+      console.log(item, index)
+      item.showForm = true
     },
     // 打开删除关键词分类弹框
     deleteClassFn (name, index) {
@@ -175,7 +231,8 @@ export default {
       this.dialog.delClass = false
       // 删除整个分类的数据
       data.splice(this.props.classIndex, 1)
-      this.$emit('updateKey', data)
+      // this.$emit('updateKey', data)
+      $bus.$emit('updateKey', data)
     },
     // 添加关键词
     addKeyFn (name) {
@@ -193,20 +250,13 @@ export default {
       this.props.notkey = []
       this.props.appendkey = []
     },
-    // 删除单个关键词
-    deleteKeyFn (index, i) {
-      console.log(index, i)
-      const data = JSON.parse(JSON.stringify(this.datas.keyList))
-      if (!data) return
-      data[index].a_key.splice(i, 1)
-      this.$emit('updateKey', data)
-    },
     // 编辑单个关键词
     editKeyFn (item, v, index, i) {
+      console.log(item)
       // index 分类下标 i 关键词下标
       this.clearPropsData()
-      this.props.ways = 'edit'
-      this.dialog.editKey = true
+      // this.props.ways = 'edit'
+      // this.dialog.editKey = true
       // 把当前关键词传到dialog key,notkey,appendKey都为数组
       this.props.className = item.s_item
       this.props.key = v.key
@@ -214,6 +264,23 @@ export default {
       this.props.appendkey = v.appendkey
       this.props.keyIndex = i
       this.props.classIndex = index
+      v.showForm = true
+    },
+    // 打开删除关键词dialog
+    deleteKeyFn (index, i) {
+      console.log(index, i)
+      this.props.classIndex = index
+      this.props.keyIndex = i
+      this.dialog.delKey = true
+    },
+    // 确定删除关键词组
+    confirmDeleteKeyFn () {
+      const data = this.datas.keyList
+      this.dialog.delKey = false
+      if (!data) return
+      data[this.props.classIndex].a_key.splice(this.props.keyIndex, 1)
+      // this.$emit('updateKey', data)
+      $bus.$emit('updateKey', data)
     },
     // 清空传值
     clearPropsData () {
@@ -277,7 +344,8 @@ export default {
         })
       }
       // 通知父组件发请求修改并更新
-      this.$emit('updateKey', data)
+      // this.$emit('updateKey', data)
+      $bus.$emit('updateKey', data)
       this.dialog.editKey = false
     },
     // 获取所有分类名
@@ -450,8 +518,7 @@ export default {
     display: flex;
     align-items: center;
     .title-text{
-      font-size: 14px;
-      font-weight: 700;
+      font-size: 16px;
       color: #1d1d1d;
     }
   }
@@ -477,6 +544,66 @@ export default {
     align-items: center;
     justify-content: flex-start;
     flex-wrap: wrap;
+    .add-words-box{
+      width: 100%;
+      height: 38px;
+      margin-top: 20px;
+      line-height: 38px;
+      border: 1px dashed #2cb7ca;
+      border-radius: 6px;
+      color: #2cb7ca;
+      font-size: 14px;
+      text-align: center;
+      cursor: pointer;
+    }
+    .words-list{
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      margin-top: 12px;
+      border: 1px solid #ececec;
+      border-radius: 8px;
+      box-sizing: border-box;
+      .list-left{
+        width: 40px;
+        height: 22px;
+        line-height: 22px;
+        margin-right: 12px;
+        font-size: 12px;
+        text-align: center;
+        box-sizing: border-box;
+      }
+      .yellow-box{
+        border: 1px solid #ff9f40;
+        color: #ff9f40;
+        border-radius: 4px;
+      }
+      .blue-box{
+        border: 1px solid #2cb7ca;
+        color: #2cb7ca;
+        border-radius: 4px;
+      }
+      .list-middle{
+        flex: 1;
+      }
+      .list-keywords{
+        color: #1d1d1d;
+        line-height: 22px;
+        font-size: 14px;
+      }
+      .list-addkey,
+      .list-notkey{
+        color: #686868;
+        line-height: 20px;
+        font-size: 12px;
+      }
+      .list-right{
+        margin-left:15px;
+      }
+    }
+
     .list{
       padding-top: 10px;
       margin-right: 10px;

src/views/subscribe/components/key/SubConfig.vue

@@ -39,7 +39,7 @@
           <p class="math-tips">开启后，系统将根据你订阅的关键词自动匹配出相关联的项目，并将相关连项目的后续动态在超级订阅内一并推送。</p>
         </div>
       </div>
-      <div class="item-other">
+      <!-- <div class="item-other">
         <div class="item-label">"其他"采购单位：</div>
         <div class="item-value item-other-value">
           <el-switch
@@ -57,7 +57,7 @@
           </el-switch>
           <p class="math-tips">每条信息的采购单位行业属性由机器自动识别，会存在少数无法识别的情况，此时将归类为“其他”。</p>
         </div>
-      </div>
+      </div> -->
       <div class="item-other">
         <div class="item-label">关键词匹配方式：</div>
         <div class="item-value item-other-value">

vue.config.js

@@ -48,7 +48,8 @@ module.exports = {
         }
       },
       '^/jypay': {
-        target: 'https://web2-jytest.jydev.jianyu360.com',
+        // target: 'https://web2-jytest.jydev.jianyu360.com',
+        target: 'http://127.0.0.1:86',
         changeOrigin: true,
         logLevel: 'debug'
       },
@@ -58,6 +59,12 @@ module.exports = {
         changeOrigin: true,
         logLevel: 'debug'
       },
+      '^/subscribepay': {
+        // target: 'https://web2-jytest.jydev.jianyu360.com',
+        target: 'http://127.0.0.1:86',
+        changeOrigin: true,
+        logLevel: 'debug'
+      },
       '^/salesLeads': {
         // target: 'https://web2-jytest.jydev.jianyu360.com',
         target: 'http://127.0.0.1:8881',