TelpoUserManageAdmin/src/views/message-manage/main/add-mass/index.vue

<!--
 * @Date: 2022-08-08 10:09:47
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-09-17 16:32:26
 * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\add-mass\index.vue
 * @description: 添加群发
-->

<template>
    <div class="home-container">
      <div class="form-container">
        <!-- 表单 -->
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="消息主题:" size="small" prop="subject">
            <el-input v-model="form.subject" class="input-width-400" clearable ></el-input>
          </el-form-item>
          <el-form-item label="内容模板:" size="small" required>


            <el-form-item prop="first">
              <p>{{firstData}}</p>
              <el-input v-model="form.first" class="input-width-600" clearable prop="first"></el-input>
            </el-form-item>

            <el-form-item prop="keyword1">
              <p>学习账号{{keyword1Data}}</p>
              <el-input v-model="form.keyword1" class="input-width-400" clearable prop="keyword1"></el-input>
            </el-form-item>

            <el-form-item prop="keyword2">
              <p>更新内容{{keyword2Data}}</p>
              <el-input v-model="form.keyword2" class="input-width-600" clearable prop="keyword1"></el-input>
            </el-form-item>

            <el-form-item prop="remark">
              <p>{{remarkData}}</p>
              <el-input v-model="form.remark" class="input-width-600" clearable prop="remark"></el-input>
            </el-form-item>
          </el-form-item>

          <el-form-item label="内容链接:" size="small" class="inline-form-item" prop="articleContent" required>
            <el-form-item prop="remark">
              <el-input v-model="form.articleContent" placeholder="请选择文章或者输入外部URL" class="input-width-400"></el-input>
              <el-select v-model="article" placeholder="选择文章" clearable filterable @change="onSelectArt">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in articleList" :key="index"/>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="群发对象:" size="small" prop="selfGroupId">
            <el-select v-model="form.selfGroupId" placeholder="选择分组" clearable filterable @change="onSelectMass">
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in groupList" :key="index"/>
            </el-select>
            <el-button type="primary" @click="onCheckList" disabled>查看名单</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 底部操作按钮 -->
      <div class="footer-container">
        <el-button type="primary" v-for="(item, index) in footBtnList" :key="index" @click="item.click">{{item.name}}</el-button>
      </div>
      <!-- 预览dialog -->
      <el-dialog title="预览信息" :visible.sync="previewShow">
        <div class="preview-container">
          <div class="top">
            <p>{{form.first}}</p>
            <p>学习账号：{{form.keyword1}}</p>
            <p>更新内容：{{form.keyword2}}</p>
            <p>更新时间：{{initUpdateTime}}</p>
            <p>{{form.remark}}</p>
          </div>
          <div class="fot">
            <p>详情</p>
            <p>></p>
          </div>
        </div>
        <div class="preview-btn">
          <el-button type="primary" @click="onConfirm">确认</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
//import TopMenu from "@/components/TopMenu/index";
import { initTime } from '@/utils/index.js';
import { APIWechatFans } from '@/api/wechat-fans.js';
/* import './index.scss' */
export default {
  name: 'add-mass',
  components: {  },
  data(){
   return {
     buttonList: [], // 头部按钮，例子：  {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
     firstData: '{{first.DATA}}:',
     keyword1Data: '{{keyword1DATA}}:',
     keyword2Data: '{{keyword2DATA}}:',
     remarkData: '{{remarkDATA}}:',
     form: {
       subject: '' /* || '财商学习通知' */, //发送主题
       templateId: 1, //模板id
       articleContent: '', //文章内容
       articleId: '', //文章id
       selfGroupId: '', //分组id
       first: '' /* || '家长您好，您孩子所需的财商学习内容有更新' */, //内容模板标题
       keyword1: '' /* || 'csds' */, //学习账号
       keyword2: '' /* || '财商36问' */, //更新内容
       remark: '' /* || '请点击内容查看详情' */, //内容详情
     },
     article: '', //选择文章
    //  文章列表
     articleList: [],
    //  用户分组
    groupList: [],
    // 底部操作按钮
    footBtnList: [
      { name: '立即发送', click: () => { this.onSend()}},
      { name: '保存', click: () => { this.onSave()} },
      { name: '预览', click: () => { this.onPreview()} },

    ],
    // 预览dialog
    previewShow: false,
    // form验证
    rules: {
      subject: [
        { required: true, message: '请输入消息主题', trigger: 'blur' },
      ],
      first: [
        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
      ],
      keyword1: [
        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
      ],
      keyword2: [
        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
      ],
      remark: [
        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
      ],
      messageSubject: [
        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
      ],
      articleContent: [
        { required: true, message: '请选择文章获取填写外部URL', trigger: 'blur' },
      ],
      selfGroupId: [
        { required: true, message: '请选择群发分组', trigger: 'blur' },
      ],
    }
   }
  },
  computed: {
    // 初始弹窗更新时间
    initUpdateTime() {
       return initTime(new Date(), 'ymdh'); //更新时间
    }
  },
  activated() {
    this.getSelfGroups();
    this.getArticlesGroup();
  },
  mounted() {
  },
  created() {
    this.getSelfGroups();
    this.getArticlesGroup();
  },
  methods: {
    // 获取自定义分组
    getSelfGroups() {
      let reqBody =  {
        page_index: 1,
        page_size: 10
      }
      APIWechatFans.SelfGroups(reqBody)
        .then(res => {
          let data = res.data;
          this.groupList = data.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
          console.log("data", data);
        })
    },
    // 获取文章列表
    getArticlesGroup() {
      let reqBody =  {
        page_index: 1,
        page_size: 100000
      }
      APIWechatFans.getArticlesGroup(reqBody)
        .then(res => {
          let data = res.data;
          console.log("文章data", data);
          this.articleList = data.map(item => {
            return {
              label: item.title,
              value: item.id
            }
          })
      })
    },
    // 查看白名单
    onCheckList() {},
    // 立即发送
    onSend() {
      // 拼接所需字段
      let keywordStr = this.form.keyword1 + ',' + this.form.keyword2;
      let reqBody = {
        send_now: true, //true 是立即发送， false是保存
        subject: this.form.subject,
        template_id: '1',
        self_group_id: this.form.selfGroupId,
        article_id: this.form.articleId,
        first: this.form.first,
        remark: this.form.remark,
        keyword: keywordStr
      };
      this.$refs['form'].validate((valid) => {
        if(valid) {
          this.addGroupSender(reqBody, '群发');
        } else {
          this.$message({
            type: "error",
            message: "请完善群发消息"
          });
        }
      });
      //this.addGroupSender(reqBody);
    },
    // 保存
    onSave() {
      // 拼接所需字段
      let keywordStr = this.form.keyword1 + ',' + this.form.keyword2;
      let reqBody = {
        send_now: false, //true 是立即发送， false是保存
        subject: this.form.subject,
        template_id: '1',
        self_group_id: this.form.selfGroupId,
        article_id: this.form.articleId,
        first: this.form.first,
        remark: this.form.remark,
        keyword: keywordStr
      };
      this.$refs['form'].validate((valid) => {
        if(valid) {
          this.addGroupSender(reqBody, '保存');
        } else {
          this.$message({
            type: "error",
            message: "请完善群发消息"
          });
        }
      });
    },
    // 添加群发
    addGroupSender(reqBody, action) {
      const loading = this.$loading({
        text: `${action}中`
      });
      APIWechatFans.addGroupSender(reqBody)
        .then(res => {
          console.log("res", res);
          if(res.code === 20000) {
            this.$message({
              type: "success",
              message: `${action}成功!`
            });
          } else {
            this.$message({
              type: "error",
              message: `${action}失败!${res.message}`
            });
          }
        }).catch(error => {
          this.$message({
              type: "error",
              message: '出错了！请联系管理员。'
            });
        }).finally(() => {
          loading.close();
        })
    },
    // 预览
    onPreview() {
      this.previewShow = true;
    },
    // 预览确认
    onConfirm() {
      this.previewShow = false;
    },
    // 选择文章
    onSelectArt(value) {
        if(value) {
            this.form.articleId = value;
            this.form.articleContent = this.articleList.filter(item => {
              return item.value === value;
            }).map(item => {
              return item.label;
            }).toString();
        }
    },
    // 选择群发对象分组
    onSelectMass(value) {
        if(value) {
            this.form.selfGroupId = value;
            console.log("选择的对象分组", value);
        }
    }
  }
}
</script>

<style scoped lang="scss">
    .home-container {
      padding: 0 20px;
      //overflow-y: scroll;
      overflow-x: hidden;
      border: none;
      box-shadow: none;
      .form-container {
        height: 520px;
        padding: 5px 0;
        border: 1px solid #d8dce5;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          margin: 5px 0;
        }
        .input-width-400 {
          width: 400px;
        }
        .input-width-600 {
          width: 600px;
        }
        .inline-form-item {
          display: inline-block;
        }
      }
      .footer-container {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-button {
          width: 120px;
        }
      }
      .preview-container {
        //height: 400px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        margin: 20px;
        border: 1px solid #d8dce5;
        .top {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          padding: 0 40px;
          border-bottom: 1px solid #d8dce5 ;
        }
        .fot {
          width: 100%;
          padding: 0 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      .preview-btn {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
</style>