playlet/project/src/components/customOperate/welcom_messa...

<template>
  <div class="createMassMsg" v-loading="loading">
    <div class="backBox" @click="$router.go(-1)">
      <div class="back">
        <i class="el-icon-back"></i>
        <span>返回</span>
      </div>
    </div>
    <div v-if="!loading" class="bg-ffffff" style="padding: 15px;">
      <h3 class="bigTitle">基础信息
        <template v-if="$route.params.rule_id">
          <span class="detail_status status_ing" v-if="dataInfo.enable==1">可用</span>
          <span class="detail_status status_del" v-if="dataInfo.enable==0">禁用</span>
        </template>
      </h3>
      <div class="self-hint" style="margin-top:10px;width:730px">
        <i class="el-icon-message-solid"></i>
        <div>
          <p>1、在渠道码处设置的欢迎语会被优先推送，如果成员在渠道码处设置了欢迎语，在此设置的欢迎语不会生效</p>
          <p>2、一个成员如果被设置了多个欢迎语，将会使用最新设置或修改的欢迎语。</p>
        </div>
      </div>
      <div class="regulations">
        <label><em>*</em>使用成员:</label>
        <div>
          <div style="display:flex">
            <el-radio v-model="is_for_all" :label="1">全部员工</el-radio>
            <el-radio v-model="is_for_all" :label="0">部分员工</el-radio>
          </div>
          <self-customerservice v-if="is_for_all==0" title='' width="300px" :afferent_users='user_id_list' @customerDefine="(val)=>{user_id_list=val;}"></self-customerservice>
        </div>
      </div>
      <div class="line" style="margin-top:20px"></div>
      <h3 class="bigTitle">发送欢迎语</h3>
      <div class="regulations">
        <label><em>*</em>欢迎语标题</label>
        <el-input placeholder="例：活动推送/拉新等" style="width:300px" v-model.trim="name" clearable size="small"></el-input>
      </div>
      <div class="regulations">
        <label style="margin-top:4px"><em>*</em>欢迎语</label>
        <edit-con source="welcom" :afferent_content='main_msg_data.content' :afferent_attachments='main_msg_data.attachments' @editContent="(val)=>{main_msg_data.content = val}" @changeAttachment='getAttachment'></edit-con>
      </div>
      <h3 class="bigTitle" style="margin-top:20px">
        分时段欢迎语:
        <el-switch v-model="is_day_parting" @change="switchChange" active-color="#13ce66" inactive-color="#ddd"></el-switch>
      </h3>
      <template v-if="is_day_parting">
        <div class="self-hint" style="margin-top:10px;width:750px;margin-left:70px;margin-top:20px">
          <p>分时段欢迎语 ：</p>
          <div>
            <p>1、员工上下班不同时间段可设置不同欢迎语；</p>
            <p>2、分时段之外的时间将发送欢迎语。</p>
          </div>
        </div>
        <div class="regulations regulations2" v-for="(item,index) in timeIntervalList" :key="index+'fenshiduan'">
          <label style="margin-top:30px;text-align:right">时段{{index+1}}：</label>
          <welcom-edit :deleteFlag='timeIntervalList.length==1?false:true' :editInfo="item" @welcomEditCon='(val)=>{getWelcomEdit(val,index)}' @deleteWelcomCon='deleteWelcomCon(index)'></welcom-edit>
        </div>
        <div class="add_welcom_hint" @click="addWelcom">
          <i class="el-icon-circle-plus-outline"></i>
          <span>添加分时段欢迎语</span>
        </div>
      </template>
      <div class="self-hint" style="margin-top:20px;width:750px;margin-left:70px">
        <i class="el-icon-message-solid"></i>
        <div>
          <p>1、新建欢迎语最多可发送1条文字消息和9个附件</p>
          <p>2、文字消息和附件不能同时为空，当两者均填写时用户会收到多条消息</p>
          <p>3、欢迎语将在客户加为好友后20秒内下发，因网络延迟可能造成发送不成功</p>
        </div>
      </div>
      <button class="button" @click="welcomeMsg_set">保存</button>
    </div>
  </div>
</template>
<script>
import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
import editCon from '@/components/assembly/editCon.vue'
import welcomEdit from '@/components/assembly/welcom_edit.vue'
export default {
  components: { selfCustomerservice, editCon, welcomEdit },
  data () {
    return {
      loading: false,
      user_id_list: [],
      is_for_all: 0,
      editFlag: true,
      is_day_parting: false,
      name: '',
      deleteTimeIntervalList: [],//删除的分时段列表
      timeIntervalList: [],//分时段列表
      init_welcom_con: {
        is_day_parting: 1,//是否为分时段欢迎语 0:否 1:是
        weeks: [1, 2, 3, 4, 5, 6, 0],
        start_time: '',
        end_time: '',
        content: '',
        attachments: [],
      },
      main_msg_data: {
        "is_day_parting": 0,
        "weeks": [],
        "start_time": "",
        "end_time": "",
        "content": '',
        "attachments": []
      },
      dataInfo: {}
    }
  },
  created () {
    if (this.$route.params.rule_id) {//详情
      this.detail()
    } else {
      this.loading = false;
    }
  },
  methods: {
    detail () {//详情
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.welcomeMsg_detail, {
        params: {
          rule_id: this.$route.params.rule_id
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          this.dataInfo = res.rst;
          this.is_for_all = res.rst.is_for_all;
          this.user_id_list = res.rst.users ? res.rst.users.split(',') : [];
          this.name = res.rst.name;
          let msg_list = res.rst.msg_list;
          msg_list.forEach((item) => {
            // item.content = item.content ? item.content.replace('%NICKNAME%', '「客户昵称」') : '';
            item.attachments = item.attachments && item.attachments != '' ? JSON.parse(item.attachments) : [];
            item.weeks = item.weeks ? item.weeks.split(',') : []
          })
          let main_msg_data = msg_list.filter((v) => {//特定有一个主欢迎语内容
            return v.is_day_parting == 0
          })
          this.main_msg_data = main_msg_data && main_msg_data.length > 0 ? main_msg_data[0] : {};

          this.timeIntervalList = msg_list.filter((v) => {//分时段欢迎语内容
            return v.is_day_parting == 1
          })

          if (msg_list.length > 1) {
            this.is_day_parting = true
          }
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    getAttachment (val) {
      this.main_msg_data.attachments = val;
    },
    getWelcomEdit (val, index) {//分时段编辑
      this.$set(this.timeIntervalList, index, val)
    },
    deleteWelcomCon (index) {//删除分时段
      if (this.$route.params.rule_id && this.timeIntervalList[index].msg_id) {//删除的分时段内容
        let obj = JSON.parse(JSON.stringify(this.timeIntervalList[index]))
        obj.operate = 'del';
        this.deleteTimeIntervalList.push(obj)
      }
      this.timeIntervalList.splice(index, 1)
    },
    addWelcom () {//添加分时段
      this.timeIntervalList.push(this.init_welcom_con)
    },
    switchChange () {//分时段开关打开
      if (this.is_day_parting && this.timeIntervalList.length == 0) {
        this.timeIntervalList.push(this.init_welcom_con)
      }
    },
    welcomeMsg_set () {//保存
      if (this.name == '') {
        this.$message({
          message: '请输入欢迎语标题！',
          type: "warning"
        })
        return
      }
      if (this.is_for_all == 0 && (!this.user_id_list || this.user_id_list.length == 0)) {
        this.$message({
          message: '请选择使用成员！',
          type: "warning"
        })
        return
      }
      if (this.main_msg_data.content == '' && (!this.main_msg_data.attachments || this.main_msg_data.attachments == '' || this.main_msg_data.attachments.length == 0)) {
        this.$message({
          message: '请输入【主】欢迎语内容！',
          type: "warning"
        })
        return
      }
      if (this.main_msg_data.content != '' && this.$getStrBytes(this.main_msg_data.content) > 4000) {
        this.$message({
          message: '请检查【主】欢迎语内容，最多4000个字节，已超出！',
          type: "error"
        })
        return
      }
      let msg_data = []
      if (this.is_day_parting) {//开启分段欢迎语
        for (let i = 0; i < this.timeIntervalList.length; i++) {
          let item = this.timeIntervalList[i];
          if (item.content == '' && (!item.attachments || item.attachments == '' || item.attachments.length == 0)) {
            this.$message({
              message: `请输入【时段${i + 1}】欢迎语内容！`,
              type: "warning"
            })
            return
          }
          if (item.content != '' && this.$getStrBytes(item.content) > 4000) {
            this.$message({
              message: `请检查【时段${i + 1}】欢迎语内容，最多4000个字节，已超出！`,
              type: "error"
            })
            return
          }
          if (!item.weeks || item.weeks.length == 0) {
            this.$message({
              message: `请选择【时段${i + 1}】发送日期！`,
              type: "warning"
            })
            return
          }
          if (!item.start_time || item.start_time == '') {
            this.$message({
              message: `请输入【时段${i + 1}】发送开始时间！`,
              type: "warning"
            })
            return
          }
          if (!item.end_time || item.end_time == '') {
            this.$message({
              message: `请输入【时段${i + 1}】发送结束时间！`,
              type: "warning"
            })
            return
          }
          if (this.$date_compatible(('2020-04-01 ' + item.start_time)).getTime() > this.$date_compatible(('2020-04-01 ' + item.end_time)).getTime()) {
            this.$message({
              message: `请正确输入【时段${i + 1}】发送时间！`,
              type: "warning"
            })
            return
          }
        }
        msg_data = msg_data.concat(this.timeIntervalList)
      } else {//关闭分段欢迎语
        let delete_arr = JSON.parse(JSON.stringify(this.timeIntervalList));
        delete_arr = delete_arr.filter((v) => {
          return v.msg_id
        })
        delete_arr.forEach((item) => {
          item.operate = 'del'
        })
        this.deleteTimeIntervalList = this.deleteTimeIntervalList.concat(delete_arr)
      }
      msg_data = msg_data.concat(this.deleteTimeIntervalList);//删除的分时段内容

      msg_data.push(this.main_msg_data)
      msg_data.forEach((item) => {
        item.weeks = item.weeks.join(',');
        // item.content = item.content.replace('「客户昵称」', '%NICKNAME%')
        item.attachments = item.attachments == '' || item.attachments.length == 0 ? '' : JSON.stringify(item.attachments)
      })

      this.$loading(this.$loadingConfig)
      this.$axios.post(this.URL.BASEURL + this.URL.welcomeMsg_set, {
        rule_id: this.$route.params.rule_id ? this.$route.params.rule_id : '',
        name: this.name,
        is_for_all: this.is_for_all,
        users: this.is_for_all == 0 ? this.user_id_list.join(',') : '',
        msg_data: msg_data
      }).then((res) => {
        var res = res.data
        this.$loading(this.$loadingConfig).close()
        if (res && res.errno == 0) {
          this.$router.go(-1)
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.$loading(this.$loadingConfig).close()
      });
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./create.scss";
.button {
  width: 178px;
  height: 40px;
  background: #00b38a;
  border-radius: 5px;
  color: #ffffff;
  font-size: 14px;
  border: none;
  margin: 40px 100px;
}
.add_welcom_hint {
  color: #00b38a;
  font-size: 16px;
  font-weight: bold;
  margin-left: 90px;
  margin-top: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  display: inline-block;
}
</style>