playlet/project/src/components/assembly/screen/channel.vue

<template>
  <div class="common-screen-item">
    <label class="common-screen-label" v-if="title && title != ''"
      :style="labelWidth ? 'width:auto;padding-left:30px' : ''">{{ title }}</label>
    <!-- <div :style="width ? 'width:' + width : ''"
      :class="['common-screen-self-box', 'common-input-select', (valueCon && valueCon.val) && clearable ? 'common-input-select-hover' : '']">
      <div :class="['common-screen-self-con', (!valueCon || !valueCon.val) ? 'common-screen-self-placeholder' : '']">
        <div class="common-screen-self-con-div">
          <span>{{ valueCon && valueCon.val ? valueCon.val : (placeholder || placeholderVal || '请选择') }}</span>
        </div>
        <i class="el-icon-circle-close other-icon" @click.stop="clear"></i>
      </div>
      <div class="common-screen-self-icon">
        <i class="el-icon-arrow-down"></i>
      </div>
      <el-select v-model="value" class="common-screen-opacity-0" placeholder="请选择" @change="change">
        <el-option v-for="item in options" :key="item.key" :label="item.val" :value="item.key">
        </el-option>
      </el-select>
    </div> -->

    <el-select
      class="select-cls"
      v-model="value"
      :style="{width: width || '210px'}"
      size="small"
      :placeholder="placeholder || placeholderVal || '请选择'"
      :clearable="clearable"
      filterable
      :disabled="disabled"
      @change="change"
    >
      <el-option v-for="item in options" :key="item.key" :label="item.val" :value="item.key" />
    </el-select>
  </div>
</template>
<script>
import {
  promotionTypeCode,
  incomeSourceCode,
  launchTypeCode,
  customerStaffStatusCode,
  kfActiveStatusCode,
} from '@/assets/js/staticTypes'
export default {
  props: {
    afferent_value: '',
    clearable: {
      type: Boolean,
      default: true
    },
    reset: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '添加渠道'
    },
    type: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    afferent_params: {//接口传入数据
      type: Object,
      default: () => ({})
    },
    width: {
      type: String,
    },
    placeholder: {
      type: String,
      default: () => ''
    },
  },
  watch: {
    reset () {
      this.value = ''
      this.valueCon = {}
    },
    options () {
      if (this.options && this.options.length > 0) {
        this.init_afferent()
      }
    }
  },
  data () {
    return {
      value: '',
      options: [],
      valueCon: {},
      placeholderVal: ''
    }
  },
  created () {
    if (this.type == 'assignment_status') {
      this.options = [
        { key: 1, val: '已转接' },
        { key: 2, val: '客户转接中' },
        { key: 3, val: '客户已拒绝' },
        { key: 4, val: '接替成员客户达到上限' },
        { key: 5, val: '无接替记录' },
        { key: -1, val: '迁移失败' },
      ]
    } else if (this.type == 'remove_status') {
      this.options = [
        { key: 1, val: '待迁移' },
        { key: 2, val: '迁移中' },
        { key: 3, val: '迁移完成' },
        { key: -1, val: '迁移失败' },
      ]
    } else if (this.type == 'remove_type') {
      this.options = [
        { key: 1, val: '在职' },
        { key: 2, val: '离职' },
      ]
    } else if (this.type == 'chat_group_status') {
      this.options = [
        { key: 1, val: '群主已发送' },
        { key: 2, val: '群主未发送' },
        { key: 3, val: '发送失败' },
      ]
    } else if (this.type == 'thePublic') {//公众号(投放账号)
      this.placeholderVal = '公众号'
      this.thePublic_init()
    } else if (this.type == 'officialAccount') { // 公众号(成员、运营配置账号)
      this.placeholderVal = '公众号'
      this.getOfficialAccount()
    } else if (this.type == 'dramaList') {//短剧列表
      this.dramaList_init()
    } else if (this.type == 'popularizCompanys') {//推广数据
      this.popularizCompanys_init()
    } else if (this.type == 'pitcher') {//投手列表
      this.pitcher_init()
    } else if (this.type == 'chargePay') {//充值订单管理-支付状态
      this.options = [
        { key: 1, val: '已付款' },
        { key: 2, val: '未付款' }
      ]
      this.placeholderVal = '支付状态'
    } else if (this.type == 'orderType') {//充值订单管理-订单类型
      this.options = [
        { key: 1, val: '通用充值' },
        { key: 2, val: '充值活动' },
        { key: 3, val: '会员充值' },
        { key: 4, val: '平台会员充值' },
      ]
      this.placeholderVal = '订单类型'
    } else if (this.type == 'paySource') {//充值订单管理-付费来源
      this.options = [
        { key: 1, val: '柚子' },
        { key: 2, val: '嘉书' },
        { key: 3, val: '迈步' },
        { key: 4, val: '点众-阳光' },
        // { key: 5, val: '中文在线' },
      ]
      this.placeholderVal = '付费来源'
    } else if (this.type == 'wx_reportRule') {//回传规则
      this.reportRule_init()
    } else if (this.type == 'corpIdList') {//企微账号下拉列表
      this.getCorpIdList()
    } else if (this.type == 'circleCreate') {//企微朋友圈-选择创建人
      this.getsysUserList()
      this.placeholderVal = '选择创建人'
    } else if (this.type == 'circleType') {//企微朋友圈-朋友圈类型
      this.options = [
        { key: 2, val: '个人发表' },
        { key: 1, val: '企业发表' }
      ]
      this.placeholderVal = '朋友圈类型'
    } else if (this.type == 'importRecordDetial_addStatus') {//批量加好友/导入详情/添加状态
      this.options = [
        { key: 0, val: '全部' },
        { key: 1, val: '待添加' },
        { key: 2, val: '待通过' },
        { key: 3, val: '已添加' },
        { key: 4, val: '待分配' },
      ]
      this.placeholderVal = '添加状态'
    } else if (this.type == 'promotionType') { // 推广类型
      this.options = [
        { key: promotionTypeCode.h5, val: 'H5' },
        { key: promotionTypeCode.mini_program, val: '小程序' },
      ]
      this.placeholderVal = '推广类型'
    } else if (this.type == 'incomeSource') { // 收入来源
      this.options = [
        { key: incomeSourceCode.launch, val: '投放推广' },
        { key: incomeSourceCode.operation, val: '运营推广' },
      ]
      this.placeholderVal = '收入来源'
    } else if (this.type == 'launchType') { // 投放类型
      this.options = [
        { key: launchTypeCode.mp, val: 'MP投放' },
        { key: launchTypeCode.adq, val: 'ADQ投放' },
      ]
      this.placeholderVal = '投放类型'
    } else if (this.type == 'adqAccount') { // adq 账号选项
      this.getAdqAccountList()
      this.placeholderVal = 'ADQ账号'
    } else if (this.type == 'allAccount') { // 总表 账号选项
      this.getAllAccountList()
      this.placeholderVal = '总表账号'
    } else if (this.type == 'platform') { // 平台选项
      this.getPlatformList()
      this.placeholderVal = '请选择平台'
    } else if (this.type == 'mpAccountHS') { // 花生平台 MP账号
      this.getMpAccountHSList()
      this.placeholderVal = '请选择账号'
    } else if (this.type == 'isActive') { // 成员管理 激活状态
      this.options = [
        { key: kfActiveStatusCode.NOT_ACTIVATED, val: '未激活' },
        { key: kfActiveStatusCode.ACTIVATED, val: '已激活' },
      ]
      this.placeholderVal = '请选择激活状态'
    } else if (this.type == 'orderSource') { // 付费来源
      this.getOrderSource()
      this.placeholderVal = '付费来源'
    } else if (this.type == 'orderSourceHS') { // 订单来源 花生
      this.getOrderSourceHS()
      this.placeholderVal = '订单来源'
    } else if (this.type == 'operatorGroup') { // 运营组
      this.getOperatorGroup()
      this.placeholderVal = '运营组'
    } else if (this.type == 'materialLibrary') { // 图片组
      this.getPicturesGroup()
      this.placeholderVal = '图片组'
    } else if (this.type == 'customerStaffStatus') { // 客服状态
      this.options = [
        { key: customerStaffStatusCode.USING, val: '运营中' },
        { key: customerStaffStatusCode.STOPPED, val: '已停用' },
        { key: customerStaffStatusCode.BANNED, val: '已封禁' },
      ]
      this.placeholderVal = '请选择'
    } else if (this.type == 'expireDays') { // 到期时间
      this.options = [
        { key: 3, val: '3天' },
        { key: 7, val: '7天' },
        { key: 15, val: '15天' },
      ]
      this.placeholderVal = '请选择'
    } else {
      this.init()
    }

  },
  methods: {
    getPicturesGroup() { //图片组
      this.$axios.get(this.URL.BASEURL + this.URL.media_groupList, {
        params: {
          page: 1,
          page_size: 500,
          operator_id: '',
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
          this.options = res.rst.data
          this.$emit('groupList', res.rst.data)
          this.options.forEach((item) => {
            item.val = item.name
            item.key = item.id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getOperatorGroup() { // 运营组
      this.$axios.get(this.URL.BASEURL + this.URL.operatorGroup_groupList, {
        params: {
          page: 1,
          page_size: 500,
          operator_id: '',
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
          this.options = res.rst.data
          this.options.forEach((item) => {
            item.val = item.group_name
            item.key = item.group_id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getOrderSourceHS() { // 订单来源 花生
      this.$axios.get(this.URL.BASEURL + this.URL.dataBoardHS_platformList, { params: {}}).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.desc
            item.key = item.order_source
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getOrderSource() { // 付费来源
      this.$axios.get(this.URL.BASEURL + this.URL.order_platformList, { params: {}}).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.platform_title
            item.key = item.platform_id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getMpAccountHSList() { // 花生平台 MP账号
      this.$axios.get(this.URL.BASEURL + this.URL.dataBoardHS_wxAccountList, {
        params: {
          is_select: 1
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.account_name
            item.key = item.wechat_account_id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getPlatformList() { // 平台选项
      this.$axios.post(this.URL.BASEURL + this.URL.getPlatformOptions, {}).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.platform_name
            item.key = item.platform_id
          });
          this.$emit('platformList', res.rst)
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getAdqAccountList() { // ADQ账号选项
      this.$axios.get(this.URL.BASEURL + this.URL.adqAccount_list, {
        params: {
          is_select: 1
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.account_id
            item.key = item.account_id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getAllAccountList() { // 总表账号选项
      this.$axios.get(this.URL.BASEURL + this.URL.dataBoard_allAccountOptions, {
        params: {
          keyword: ''
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.account_name
            item.key = item.account_id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getsysUserList () {
      this.$axios.get(this.URL.BASEURL + this.URL.getsysUserList, {
        params: {
          ...this.afferent_params
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.name;
            item.key = item.admin_id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    init_afferent () {//传入的时初始化
      if (this.afferent_value) {
        this.value = this.afferent_value
        let arr = this.options.filter((v) => {
          return v.key == this.value
        })
        arr.length > 0 ? this.valueCon = arr[0] : ''
      }
    },
    clear () {
      this.value = ''
      this.valueCon = {}
      this.$emit('channelDefine', '')
    },
    change () {
      let arr = this.options.filter((v) => {
        return v.key == this.value
      })
      arr.length > 0 ? this.valueCon = arr[0] : ''
      this.$emit('channelDefine', this.value)
    },
    init () {
      this.$axios.get(this.URL.BASEURL + this.URL.addWayList, {}).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    thePublic_init () {
      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_wxAccountList, {
        params: {
          is_select: 1,
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.account_name;
            item.key = item.wechat_account_id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getOfficialAccount () {
      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_officialAccountsList, {
        params: {
          is_select: 1,
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.account_name;
            item.key = item.wechat_account_id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    dramaList_init () {
      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_dramaList, {
        params: {
          is_select: 1
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.name;
            item.key = item.id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    popularizCompanys_init () {
      this.$axios.get(this.URL.BASEURL + this.URL.stat_popularizCompanys, {
        params: this.afferent_params
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.principalName;
            item.key = item.principalName
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    pitcher_init () {
      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_pitcherList, {
        params: this.afferent_params
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.name;
            item.key = item.id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    reportRule_init () {
      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_reportRuleList, {
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.name;
            item.key = item.id
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    },
    getCorpIdList () {
      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_getCorpIdList, {
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.options = res.rst
          this.options.forEach((item) => {
            item.val = item.corp_name;
            item.key = item.corpid
          });
        } else if (res.errno != 4002) {
        }
      }).catch((err) => {
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.dateInput {
  padding: 0 !important;
  text-align: center;
}
.select-cls {
  /deep/ &.el-select .el-input.is-focus .el-input__inner,
  /deep/ &.el-select .el-input__inner:focus {
    border-color: #DCDFE6;
  }
  /deep/ .el-input__suffix {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #DCDFE6;
    right: 0;
    width: 30px;
    background-color: #F1F1F1;
    .el-input__icon {
      color: #909399;
    }
  }
}
</style>