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

<template>
  <div class="keywords">
    <div class="key-title">关键词设置 <span style="font-size:14px;"><em style="color: #2cb7ca;">{{keyCounts}}</em>/{{datas.maxKeyCounts}}</span></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.trim="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="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>
            <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>
  </div>
</template>
<script>
import { Input, Button } from 'element-ui'
import { updateKey } from '@/api/modules/subscribe'
export default {
  name: 'key-config',
  props: {
    datas: {
      keywordsList: Array,
      maxKeyCounts: Number
    }
  },
  components: {
    [Input.name]: Input,
    [Button.name]: Button
  },
  data () {
    return {
      cur: {
        classify: '',
        key: '',
        appendkey: [''],
        notkey: ['']
      },
      curArr: {
        a_key: [],
        s_item: ''
      }
    }
  },
  computed: {
    keyCounts () {
      let count = 0
      this.datas.keywordsList.forEach(v => {
        if (v && v.a_key) {
          count += v.a_key.length
        }
      })
      return count
    },
    keyDisabled () {
      return !this.cur.key
    }
  },
  mounted () {
    console.log(this.datas)
  },
  methods: {
    // 保存数据
    saveCurData () {
      let newData = []
      this.curArr.s_item = this.cur.classify
      this.curArr.a_key = [{
        appendkey: this.cur.appendkey,
        key: [this.cur.key],
        notkey: this.cur.notkey
      }]
      this.datas.keywordsList.push(this.curArr)
      newData = this.datas.keywordsList
      console.log(newData)
      return newData
    },
    // 提交关键词
    submitKeywords () {
      const classArr = this.getClassArray()
      const keyArr = this.getKeyTotalArray()
      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: '关键词不能重复'
        })
      }
      const params = {
        a_items: this.saveCurData()
      }
      console.log(params, 'data')
      updateKey({
        a_items: params.a_items
      }).then((res) => {
        console.log(res)
      })
    },
    // 添加附加词
    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.keywordsList.forEach((v) => {
        if (v.s_item) {
          classArr.push(v.s_item)
        }
      })
      return classArr
    },
    // 获取所有关键词的key的属性，并返回一个数组(主要用于判断添加关键词是否重复)
    getKeyTotalArray () {
      const keysArr = []
      this.datas.keywordsList.forEach((s) => {
        if (s && s.a_key && this.isArray(s.a_key)) {
          s.a_key.forEach((v) => {
            if (this.isArray(v.key)) {
              v.key.forEach(x => {
                keysArr.push(x)
              })
            } else {
              keysArr.push(v.key)
            }
          })
        }
      })
      return keysArr
    },
    // 判断变量是否是数组
    isArray (o) {
      return Object.prototype.toString.call(o) === '[object Array]'
    },
    groupListKeyArrToString (list, state) {
      let mList = JSON.parse(JSON.stringify(list))
      if (this.isArray(mList)) {
        mList.forEach((keyList) => {
          if (keyList && keyList.a_key && this.isArray(keyList.a_key)) {
            keyList.a_key.forEach((item) => {
              if (!state && this.isArray(item.key)) {
                // 数组拼接
                item.key = item.key.join(' ')
              } else if (state === 1) {
                // 字符串切割
                item.key = item.key.replace(/\s+/g, ' ').split(' ')
              } else {
                if (state) {
                  console.error('关键词key，必须为字符串。并且state参数只有两种数值0和1')
                } else {
                  console.error('关键词key，必须为数组')
                }
              }
            })
          }
        })
      } else {
        mList = []
      }
      console.log(mList)
      return mList
    }
  }
}
</script>
<style lang="scss" scoped>
.keywords{
  .key-title{
    padding-bottom: 8px;
    font-size: 18px;
    color: #1d1d1d;
    line-height: 28px;
    border-bottom: 1px solid #ececec;
  }
  .key-content{
    padding: 20px 0;
    .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-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;
      }
    }
    .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{
    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>