web/apps/bigmember_pc/src/components/subscribe-manager/KeyConfig.vue

<template>
  <div class="keywords-config">
    <div class="key-title">
      <div>
        <span>关键词组设置</span>
        <span style="font-size: 14px"
          ><em style="color: #2cb7ca"> {{ keyCounts }}</em
          >/{{ maxCount }}</span
        >
        <p
          style="
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #2cb7ca;
          "
        >
          注：任意1组关键词组匹配成功即推送相关信息
          <img
            @click="setClickEvent"
            src="@/assets/images/icon/help.png"
            class="icon-help-img"
          />
        </p>
      </div>
      <div class="add-classify" @click="addClassifyFn">
        <i class="el-icon-plus"></i> 新增分类
      </div>
    </div>
    <div class="key-content">
      <KeyList
        ref="keyConfigRef"
        :list="keywordsList"
        :max-count="maxCount"
        :key="sort"
        @update="onUpdateKey"
      ></KeyList>
    </div>
    <el-dialog
      custom-class="sub-dialog small-dialog nesting-dialog r70"
      :visible.sync="add.dialog"
      :close-on-click-modal="false"
      :show-close="false"
      center
      width="460px"
      v-component-change-mount="{ selector: '.drawer-dialog' }"
    >
      <KeyCard @onCancel="add.dialog = 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="add.className"
                maxlength="20"
                placeholder="请输入关键词分类"
              ></el-input>
            </div>
          </div>
        </div>
      </KeyCard>
    </el-dialog>
  </div>
</template>
<script>
import { Input, Button, Dialog, RadioGroup, Radio } from 'element-ui'
import KeyCard from '@/components/selector/SelectorCard'
import KeyList from './components/List.vue'
export default {
  name: 'keyConfig',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    maxCount: Number
  },
  components: {
    [Input.name]: Input,
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    KeyCard,
    KeyList
  },
  data() {
    return {
      keywordsList: this.list,
      add: {
        dialog: false,
        className: ''
      },
      sort: 1,
      showSetKeyDialog: false
    }
  },
  computed: {
    keyCounts() {
      let count = 0
      this.keywordsList.forEach((v) => {
        if (v && v.a_key) {
          count += v.a_key.length
        }
      })
      return count
    }
  },
  methods: {
    setClickEvent() {
      this.$emit('closeDilog')
    },
    onUpdateKey(data) {
      this.keywordsList = data || []
      this.$emit('update', this.keywordsList)
    },
    parentGetCurEdit() {
      const t = this.$refs.keyConfigRef.getCurEdit()
      return t
    },
    // 新增关键词分类弹框
    addClassifyFn() {
      const t = this.parentGetCurEdit()
      if (t) return this.$toast('请先保存或取消正在操作的关键词组')
      this.add.className = ''
      this.add.dialog = true
    },
    // 确认添加分类
    confirmEditClassFn() {
      const classArr = this.getClassArray()
      const list = this.keywordsList
      if (classArr.indexOf(this.add.className) > -1) {
        return this.$message({
          type: 'warning',
          message: '分类名不能重复'
        })
      } else if (this.add.className === '') {
        return this.$message({
          type: 'warning',
          message: '分类名不能为空'
        })
      }
      if (list.length === 1 && list[0].s_item === '未分类') {
        list[0].s_item = this.add.className
        list[0].updatetime = parseInt(Date.now() / 1000)
      } else {
        list.push({
          s_item: this.add.className,
          a_key: [],
          showForm: false,
          updatetime: parseInt(Date.now() / 1000)
        })
      }
      this.add.dialog = false
      this.sort = Date.now()
      this.$refs.keyConfigRef.$forceUpdate()
      this.$emit('update', this.keywordsList)
    },
    // 获取所有分类名
    getClassArray() {
      const data = this.keywordsList
      const classArr = []
      data.forEach((v) => {
        if (v.s_item) {
          classArr.push(v.s_item)
        }
      })
      return classArr
    }
  }
}
</script>
<style lang="scss" scoped>
.keywords-config {
  margin-top: 12px;
  padding: 0 30px;
  background: #fff;
  .key-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0 8px;
    font-size: 18px;
    color: #1d1d1d;
    line-height: 28px;
    border-bottom: 1px solid #ececec;
    .icon-help-img {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin: 0 7px 0 8px;
      cursor: pointer;
    }
    .add-classify {
      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;
    .classify-title {
      display: flex;
      align-items: center;
      .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;
        &::before {
          content: '' !important;
        }
      }
      .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;
      }
    }
  }
}
</style>