|
|
@@ -0,0 +1,746 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-dialog :title="sendMsgOpen.title" :visible.sync="sendMsgOpen.open" width="1000px" append-to-body>
|
|
|
+ <el-alert
|
|
|
+ type="error"
|
|
|
+ :closable="false"
|
|
|
+ show-icon>
|
|
|
+ <template #title>
|
|
|
+ <span style="font-size: 25px; line-height: 1.5;">
|
|
|
+ 此功能用于给 选中的 SOP营期 内【所有的】客户发送 消息
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-alert>
|
|
|
+ <el-form ref="msgForm" :model="msgForm" :rules="msgRules" label-width="100px">
|
|
|
+ <el-form-item label="策略" prop="draftStrategy">
|
|
|
+ <el-radio-group v-model="msgForm.draftStrategy">
|
|
|
+ <el-radio :label="1">正常群发</el-radio>
|
|
|
+ <el-radio :label="2">清除草稿</el-radio>
|
|
|
+ <el-radio :label="3">发送草稿</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="选择课程" v-if="msgForm.draftStrategy==1" >
|
|
|
+ <el-select v-model="msgForm.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini" @change="courseChange()">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in courseList"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" @change="videoIdChange()" >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in videoList"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="msgForm.courseType" placeholder="请选择消息类型" size="mini" style=" margin-right: 10px;">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in sysFsSopWatchStatus"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规则" prop="setting" v-if="msgForm.draftStrategy==1" >
|
|
|
+ <div v-for="(item, index) in setting" :key="index" style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="22">
|
|
|
+ <el-form :model="item" label-width="70px">
|
|
|
+ <el-form-item label="内容类别" style="margin: 2%">
|
|
|
+ <el-radio-group v-model="item.contentType">
|
|
|
+ <el-radio :label="item.dictValue" v-for="item in sysQwSopAiContentType" @change="handleContentTypeChange()">{{item.dictLabel}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容" style="margin-bottom: 2%" >
|
|
|
+ <el-input
|
|
|
+ v-if="item.contentType == 1"
|
|
|
+ v-model="item.value"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="内容"
|
|
|
+ style="width: 90%; margin-top: 10px;"
|
|
|
+ @keydown.native="handleKeydown($event, index)"
|
|
|
+ :ref="`textarea-${index}`"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-link
|
|
|
+ v-if="item.contentType == 1"
|
|
|
+ type="primary"
|
|
|
+ @click="toggleSalesCall(index)"
|
|
|
+ style="margin-top: 10px;"
|
|
|
+ >
|
|
|
+ {{ item.isSalesCallAdded ? '移除#销售称呼#' : '添加#销售称呼#' }}
|
|
|
+ </el-link>
|
|
|
+ <el-link
|
|
|
+ v-if="item.contentType == 1"
|
|
|
+ type="primary"
|
|
|
+ @click="toggleSalesCallCustomer(index)"
|
|
|
+ style="margin-top: 10px;margin-left: 2%"
|
|
|
+ >
|
|
|
+ {{ item.isSalesCallCustomerAdded ? '移除#客户称呼#' : '添加#客户称呼#' }}
|
|
|
+ </el-link>
|
|
|
+
|
|
|
+
|
|
|
+ <ImageUpload v-if="item.contentType == 2 " v-model="item.imgUrl" type="image" :num="1" :width="150" :height="150" />
|
|
|
+
|
|
|
+ <div v-if="item.contentType == 3 || item.contentType ==9 ">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-form-item label="链接标题:" label-width="100px">
|
|
|
+ <el-input v-model="item.linkTitle" placeholder="请输入链接标题" style="width: 90%;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接描述:" label-width="100px" >
|
|
|
+ <el-input type="textarea" :rows="3" v-model="item.linkDescribe" placeholder="请输入链接描述" style="width: 90%;margin-top: 1%;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接封面:" label-width="100px">
|
|
|
+ <ImageUpload v-model="item.linkImageUrl" type="image" :num="1" :file-size="2" :width="150" :height="150" style="margin-top: 1%;" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接地址:" label-width="100px" >
|
|
|
+ <el-tag type="warning" v-model="item.isBindUrl=1">选择的课程小节 即为卡片链接地址</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.contentType == 4">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-form-item label="标题" prop="miniprogramTitle">
|
|
|
+ <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="封面" prop="miniprogramPicUrl">
|
|
|
+ <ImageUpload v-model="item.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="appid" prop="miniprogramAppid" v-show="false" >
|
|
|
+ <el-input v-model="item.miniprogramAppid='wx73f85f8d62769119' " disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="page路径" prop="miniprogramPage" v-show="false" label-width="100px" style="margin-left: -30px" >
|
|
|
+ <el-input v-model="item.miniprogramPage" placeholder="小程序消息打开后的路径" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.contentType == 5 ">
|
|
|
+
|
|
|
+ <el-form-item label="上传文件:" prop="fileUrl" label-width="100px">
|
|
|
+ <el-upload
|
|
|
+ v-model="item.fileUrl"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="(res, file) => handleAvatarSuccessFile(res, file, item)"
|
|
|
+ :before-upload="beforeAvatarUploadFile">
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <el-link v-if="item.fileUrl" type="primary" :href="downloadUrl(item.fileUrl)" download>
|
|
|
+ {{item.fileUrl}}
|
|
|
+ </el-link>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="item.contentType == 6 ">
|
|
|
+ <el-form-item label="上传视频：" prop="videoUrl" label-width="100px">
|
|
|
+ <el-upload
|
|
|
+ v-model="item.videoUrl"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="(res, file) => handleAvatarSuccessVideo(res, file, item)"
|
|
|
+ :before-upload="beforeAvatarUploadVideo">
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <video v-if="item.videoUrl"
|
|
|
+ :src="item.videoUrl"
|
|
|
+ controls style="width: 200px;height: 100px">
|
|
|
+ </video>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.contentType == 7 ">
|
|
|
+ <el-input
|
|
|
+ v-model="item.value"
|
|
|
+ type="textarea" :rows="3" maxlength="66" show-word-limit
|
|
|
+ placeholder="输入要转为语音的内容" style="width: 90%;margin-top: 10px;"
|
|
|
+ @input="handleInputVideoText(item.value,item)"/>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.contentType == 8">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="添加短链" v-if="item.contentType == 1 " >
|
|
|
+ <el-tooltip content="请先根据课程选定课程小节之后再添加" effect="dark" :disabled="!!msgForm.videoId">
|
|
|
+ <el-switch
|
|
|
+ v-model="item.isBindUrl"
|
|
|
+ :disabled="!msgForm.videoId"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#DCDFE6"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="2">
|
|
|
+ </el-switch>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <span v-if="item.isBindUrl == '1'" style="margin-left: 10px; color: #13ce66">添加URL</span>
|
|
|
+ <span v-if="item.isBindUrl == '2'" style="margin-left: 10px; color: #b1b4ba">不加URL</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="课节过期时间" v-if="item.isBindUrl == '1'
|
|
|
+ && item.contentType != 2
|
|
|
+ && item.contentType != 5
|
|
|
+ && item.contentType != 6
|
|
|
+ && item.contentType != 8"
|
|
|
+ style="margin-top: 1%" label-width="100px">
|
|
|
+ <el-row>
|
|
|
+ <el-input-number v-model="item.expiresDays" :min="1" :max="100" ></el-input-number>
|
|
|
+ （天）
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <span class="tip">填写0或不填时，默认为系统配置的默认时间</span>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1" :offset="1">
|
|
|
+ <i class="el-icon-delete" @click="delSetList(index)" style="margin-top: 20px;" v-if="setting.length>1"></i>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-link type="primary" class="el-icon-plus" :underline="false" @click='addSetList()' >添加内容</el-link>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发送时间" prop="sendTime" v-if="msgForm.draftStrategy==1" >
|
|
|
+ <el-time-picker
|
|
|
+ class="custom-input"
|
|
|
+ v-model="msgForm.sendTime"
|
|
|
+ value-format="HH:mm"
|
|
|
+ format="HH:mm"
|
|
|
+ placeholder="时间"
|
|
|
+ style="width: 100px;height: 20px;">
|
|
|
+ </el-time-picker>
|
|
|
+ <span class="tip" style="margin-left: 2%"> 不填时，默认为系统当前时间(立即发送)</span>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitMsgForm">确 定</el-button>
|
|
|
+ <el-button @click="cancelMsgForm">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { sendMsg,} from "../../../api/qw/sopUserLogsInfo";
|
|
|
+import ImageUpload from "@/views/qw/sop/ImageUpload.vue";
|
|
|
+import {courseList, videoList} from "@/api/qw/sop";
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "sendMsgSopOpenTool",
|
|
|
+ components: {ImageUpload},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //上传语音的遮罩层
|
|
|
+ voiceLoading :false,
|
|
|
+ uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
|
|
|
+ uploadUrlByVoice:process.env.VUE_APP_BASE_API+"/common/uploadOSSByHOOKVoice",
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 导出遮罩层
|
|
|
+ exportLoading: false,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // sopUserLogsInfo表格数据
|
|
|
+ sopUserLogsInfoList: [],
|
|
|
+ sysFsSopWatchStatus: [],
|
|
|
+ isSalesCallAdded:false,
|
|
|
+ isSalesCallCustomerAdded:false,
|
|
|
+ tagList:[],
|
|
|
+ selectTags:[],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ updateOpen:false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ tagIds:null,
|
|
|
+ remark:null,
|
|
|
+ sopId: null,
|
|
|
+ userLogsId: null,
|
|
|
+ userIdParam:null,
|
|
|
+ startTimeParam:null,
|
|
|
+ externalContactId: null,
|
|
|
+ qwUserId: null,
|
|
|
+ corpId: null,
|
|
|
+ externalId: null,
|
|
|
+ fsUserId: null,
|
|
|
+ externalUserName: null,
|
|
|
+ createTime: null,
|
|
|
+ },
|
|
|
+
|
|
|
+ courseList:[],
|
|
|
+ videoList:[],
|
|
|
+ //插件版
|
|
|
+ sysQwSopAiContentType:[],
|
|
|
+
|
|
|
+ sendMsgOpen:{
|
|
|
+ title:'一键批量群发',
|
|
|
+ open:false,
|
|
|
+ ids:null,
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ setting:[{contentType:'1', value: '',}],
|
|
|
+ msgForm:{
|
|
|
+ videoId:null,
|
|
|
+ courseId:null,
|
|
|
+ courseType:null,
|
|
|
+ userIdParam:null,
|
|
|
+ setting:null,
|
|
|
+ ids:null,
|
|
|
+ type:null,
|
|
|
+ corpId:null,
|
|
|
+ sopId: null,
|
|
|
+ sopIds: null,
|
|
|
+ startTime: null,
|
|
|
+ sendTime: null,
|
|
|
+ draftStrategy:1,
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {},
|
|
|
+ batchRules:{
|
|
|
+ paramTime: [
|
|
|
+ { required: true, message: '选择的时间不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ msgRules:{},
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.getDicts("sys_qwSopAi_contentType").then(response => {
|
|
|
+ this.sysQwSopAiContentType = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("sys_fs_sop_watch_status").then(response => {
|
|
|
+ this.sysFsSopWatchStatus = response.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ courseList().then(response => {
|
|
|
+ this.courseList = response.list;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ oneClickGroupSending(val,type,corpId){
|
|
|
+
|
|
|
+ this.sendMsgOpen.open= true;
|
|
|
+ this.msgForm.sopIds = val;
|
|
|
+ this.msgForm.type = type;
|
|
|
+ this.msgForm.corpId = corpId;
|
|
|
+
|
|
|
+ },
|
|
|
+ courseChange() {
|
|
|
+ if (this.msgForm.courseId != null ) {
|
|
|
+ const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === this.msgForm.courseId);
|
|
|
+ for (let i = 0; i < this.setting.length; i++) {
|
|
|
+ //响应式直接给链接的标题/封面上值
|
|
|
+ if (selectedCourse && this.msgForm.courseId != null) {
|
|
|
+ if ( this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ){
|
|
|
+ this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
|
|
|
+ this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+ if ( this.setting[i].contentType == 4 ){
|
|
|
+ this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ videoList(this.msgForm.courseId).then(response => {
|
|
|
+ this.videoList=response.list;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ videoIdChange() {
|
|
|
+ if (this.msgForm.videoId != null ) {
|
|
|
+ // 查找选中的课节对应的 label
|
|
|
+ const selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === this.msgForm.videoId);
|
|
|
+
|
|
|
+ for (let i = 0; i < this.setting.length; i++) {
|
|
|
+ //响应式直接给链接的描述上值
|
|
|
+ if (selectedVideo && this.msgForm.videoId != null) {
|
|
|
+ if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ){
|
|
|
+ this.$set(this.setting[i], 'linkDescribe', selectedVideo.dictLabel);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.setting[i].contentType == 4){
|
|
|
+ this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAvatarSuccessFile(res, file, item) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ // 使用 $set 确保响应式更新
|
|
|
+ this.$set(item, 'fileUrl', res.url);
|
|
|
+ } else {
|
|
|
+ this.msgError(res.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeAvatarUploadFile(file){
|
|
|
+ const isLt1M = file.size / 1024 / 1024 < 10;
|
|
|
+ if (!isLt1M) {
|
|
|
+ this.$message.error('上传大小不能超过 10MB!');
|
|
|
+ }
|
|
|
+ return isLt1M;
|
|
|
+ },
|
|
|
+ //下载文件
|
|
|
+ downloadUrl(materialUrl) {
|
|
|
+ // 直接返回文件 URL
|
|
|
+ return materialUrl;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleAvatarSuccessVideo(res, file, item) {
|
|
|
+ if(res.code==200){
|
|
|
+ // 使用 $set 确保响应式更新
|
|
|
+ this.$set(item, 'videoUrl', res.url);
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.msgError(res.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeAvatarUploadVideo(file){
|
|
|
+ const isLt30M = file.size / 1024 / 1024 < 10;
|
|
|
+ const isMP4 = file.type === 'video/mp4';
|
|
|
+
|
|
|
+ if (!isMP4) {
|
|
|
+ this.$message.error('仅支持上传 MP4 格式的视频文件!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!isLt30M) {
|
|
|
+ this.$message.error('上传大小不能超过 10MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleInputVideoText(value,content){
|
|
|
+ // 允许的字符：中文、英文（大小写）、数字和指定标点符号（，。！？）
|
|
|
+ const regex = /^[\u4e00-\u9fa5，。！？,!?]+$/;
|
|
|
+
|
|
|
+ // 删除不符合条件的字符
|
|
|
+ const filteredValue = value.split('').filter(char => regex.test(char)).join('');
|
|
|
+
|
|
|
+ this.$set(content, 'value', filteredValue);
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ delSetList(index){
|
|
|
+ this.setting.splice(index,1)
|
|
|
+ },
|
|
|
+ addSetList(){
|
|
|
+ const newSetting = {
|
|
|
+ contentType:'1',
|
|
|
+ value: '',
|
|
|
+ };
|
|
|
+ // 将新设置项添加到 content.setting 数组中
|
|
|
+ this.setting.push(newSetting);
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ handleKeydown(event, index) {
|
|
|
+ const item = this.setting[index];
|
|
|
+ const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
|
|
|
+ const cursorPosition = textarea.selectionStart;
|
|
|
+
|
|
|
+ // 检查是否按下了 Backspace 或 Delete 键
|
|
|
+ if (event.key === 'Backspace' || event.key === 'Delete') {
|
|
|
+ const tags = ['#销售称呼#', '#客户称呼#']; // 需要检查的标签
|
|
|
+ const value = item.value;
|
|
|
+
|
|
|
+ // 遍历标签，检查是否需要删除
|
|
|
+ for (const tag of tags) {
|
|
|
+ let start, end;
|
|
|
+
|
|
|
+ if (event.key === 'Backspace') {
|
|
|
+ // 检查光标前是否是当前标签的一部分
|
|
|
+ start = cursorPosition - tag.length;
|
|
|
+ if (start >= 0 && value.slice(start, cursorPosition) === tag) {
|
|
|
+ // 删除整个标签
|
|
|
+ item.value = value.slice(0, start) + value.slice(cursorPosition);
|
|
|
+ // 更新光标位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ textarea.setSelectionRange(start, start);
|
|
|
+ });
|
|
|
+ // 更新状态
|
|
|
+ if (tag === '#销售称呼#') item.isSalesCallAdded = false;
|
|
|
+ if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
|
|
|
+ event.preventDefault(); // 阻止默认删除行为
|
|
|
+ break; // 找到匹配的标签后退出循环
|
|
|
+ }
|
|
|
+ } else if (event.key === 'Delete') {
|
|
|
+ // 检查光标后是否是当前标签的一部分
|
|
|
+ end = cursorPosition + tag.length;
|
|
|
+ if (end <= value.length && value.slice(cursorPosition, end) === tag) {
|
|
|
+ // 删除整个标签
|
|
|
+ item.value = value.slice(0, cursorPosition) + value.slice(end);
|
|
|
+ // 更新状态
|
|
|
+ if (tag === '#销售称呼#') item.isSalesCallAdded = false;
|
|
|
+ if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
|
|
|
+ event.preventDefault(); // 阻止默认删除行为
|
|
|
+ break; // 找到匹配的标签后退出循环
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查光标是否位于标签的中间
|
|
|
+ for (let i = 0; i <= tag.length; i++) {
|
|
|
+ const tagStart = cursorPosition - i;
|
|
|
+ const tagEnd = tagStart + tag.length;
|
|
|
+ if (
|
|
|
+ tagStart >= 0 &&
|
|
|
+ tagEnd <= value.length &&
|
|
|
+ value.slice(tagStart, tagEnd) === tag
|
|
|
+ ) {
|
|
|
+ // 删除整个标签
|
|
|
+ item.value = value.slice(0, tagStart) + value.slice(tagEnd);
|
|
|
+ // 更新光标位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ textarea.setSelectionRange(tagStart, tagStart);
|
|
|
+ });
|
|
|
+ // 更新状态
|
|
|
+ if (tag === '#销售称呼#') item.isSalesCallAdded = false;
|
|
|
+ if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
|
|
|
+ event.preventDefault(); // 阻止默认删除行为
|
|
|
+ break; // 找到匹配的标签后退出循环
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换添加销售称呼按钮点击事件
|
|
|
+ toggleSalesCall(index) {
|
|
|
+ const item = this.setting[index];
|
|
|
+ const salesCall = '#销售称呼#';
|
|
|
+ const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
|
|
|
+
|
|
|
+ // 获取当前光标位置
|
|
|
+ const cursorPosition = textarea.selectionStart;
|
|
|
+
|
|
|
+ if (item.isSalesCallAdded) {
|
|
|
+ // 移除所有的 #销售称呼#
|
|
|
+ item.value = item.value.replace(new RegExp(salesCall, 'g'), '');
|
|
|
+ } else {
|
|
|
+ // 添加 #销售称呼#
|
|
|
+ item.value = item.value.slice(0, cursorPosition) + salesCall + item.value.slice(cursorPosition);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换状态
|
|
|
+ item.isSalesCallAdded = !item.isSalesCallAdded;
|
|
|
+
|
|
|
+ // 保持光标位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ textarea.setSelectionRange(cursorPosition, cursorPosition);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toggleSalesCallCustomer(index) {
|
|
|
+ const item = this.setting[index];
|
|
|
+ const salesCall = '#客户称呼#';
|
|
|
+ const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
|
|
|
+
|
|
|
+ // 获取当前光标位置
|
|
|
+ const cursorPosition = textarea.selectionStart;
|
|
|
+
|
|
|
+ if (item.isSalesCallCustomerAdded) {
|
|
|
+ // 移除所有的 #销售称呼#
|
|
|
+ item.value = item.value.replace(new RegExp(salesCall, 'g'), '');
|
|
|
+ } else {
|
|
|
+ // 添加 #客户称呼#
|
|
|
+ item.value = item.value.slice(0, cursorPosition) + salesCall + item.value.slice(cursorPosition);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换状态
|
|
|
+ item.isSalesCallCustomerAdded = !item.isSalesCallCustomerAdded;
|
|
|
+
|
|
|
+ // 保持光标位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ textarea.setSelectionRange(cursorPosition, cursorPosition);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleContentTypeChange() {
|
|
|
+
|
|
|
+ //如果是链接的才上
|
|
|
+ if (this.msgForm.courseId != null ) {
|
|
|
+ const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === this.msgForm.courseId);
|
|
|
+ for (let i = 0; i < this.setting.length; i++) {
|
|
|
+ //响应式直接给链接的标题/封面上值
|
|
|
+ if (selectedCourse && this.msgForm.courseId != null) {
|
|
|
+
|
|
|
+ if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9){
|
|
|
+ this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
|
|
|
+ this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
|
|
|
+ }
|
|
|
+ if (this.setting[i].contentType == 4){
|
|
|
+ this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if (this.msgForm.videoId != null ) {
|
|
|
+ // 查找选中的课节对应的 label
|
|
|
+ const selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === this.msgForm.videoId);
|
|
|
+
|
|
|
+ for (let i = 0; i < this.setting.length; i++) {
|
|
|
+ //响应式直接给链接的描述上值
|
|
|
+ if (selectedVideo && this.msgForm.videoId != null) {
|
|
|
+
|
|
|
+ if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9){
|
|
|
+ this.$set(this.setting[i], 'linkDescribe', selectedVideo.dictLabel);
|
|
|
+ }
|
|
|
+ if (this.setting[i].contentType == 4){
|
|
|
+ this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ resetSendMsgSop() {
|
|
|
+ this.msgForm = {
|
|
|
+ videoId:null,
|
|
|
+ courseId:null,
|
|
|
+ courseType:null,
|
|
|
+ setting:null,
|
|
|
+ sendTime:null,
|
|
|
+ draftStrategy:1,
|
|
|
+ };
|
|
|
+ this.resetForm("msgForm");
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.id)
|
|
|
+ this.single = selection.length!==1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
+
|
|
|
+ submitMsgForm(){
|
|
|
+
|
|
|
+ this.$refs["msgForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+
|
|
|
+ if (this.msgForm.draftStrategy==1){
|
|
|
+
|
|
|
+ this.msgForm.setting=JSON.stringify(this.setting)
|
|
|
+
|
|
|
+ if (this.setting.length <= 0) {
|
|
|
+ return this.$message.error("请添加规则")
|
|
|
+ }
|
|
|
+ if (this.msgForm.courseId===null || this.msgForm.courseId===''){
|
|
|
+ return this.$message.error("课程不能为空")
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.msgForm.videoId===null || this.msgForm.videoId===''){
|
|
|
+ return this.$message.error("课节不能为空")
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.msgForm.courseType===null || this.msgForm.courseType===''){
|
|
|
+ return this.$message.error("消息类型不能为空")
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 0; i < this.setting.length; i++) {
|
|
|
+ if (this.setting[i].contentType == 1 && (this.setting[i].value == null || this.setting[i].value == "")) {
|
|
|
+ return this.$message.error("内容不能为空")
|
|
|
+ }
|
|
|
+ if (this.setting[i].contentType == 2 && (this.setting[i].imgUrl == null || this.setting[i].imgUrl == "")) {
|
|
|
+ return this.$message.error("图片不能为空")
|
|
|
+ }
|
|
|
+ if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ) && (this.setting[i].linkTitle == null || this.setting[i].linkTitle == "")) {
|
|
|
+ return this.$message.error("链接标题不能为空")
|
|
|
+ }
|
|
|
+ if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ) && (this.setting[i].linkDescribe == null || this.setting[i].linkDescribe == "")) {
|
|
|
+ return this.$message.error("链接描述不能为空")
|
|
|
+ }
|
|
|
+ if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ) && (this.setting[i].linkImageUrl == null || this.setting[i].linkImageUrl == "")) {
|
|
|
+ return this.$message.error("链接图片不能为空")
|
|
|
+ }
|
|
|
+ if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 )&& this.setting[i].type == 1 && (this.setting[i].linkUrl == null || this.setting[i].linkUrl == "")) {
|
|
|
+ return this.$message.error("链接地址不能为空")
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.setting[i].contentType == 4 && (this.setting[i].miniprogramTitle == null || this.setting[i].miniprogramTitle == "")) {
|
|
|
+ return this.$message.error("小程序消息标题不能为空")
|
|
|
+ }
|
|
|
+ if (this.setting[i].contentType == 4 && (this.setting[i].miniprogramPicUrl == null || this.setting[i].miniprogramPicUrl == "")) {
|
|
|
+ return this.$message.error("小程序封面地址不能为空")
|
|
|
+ }
|
|
|
+ if (this.setting[i].contentType == 5 && (this.setting[i].fileUrl == null || this.setting[i].fileUrl == "")) {
|
|
|
+ return this.$message.error("文件不能为空")
|
|
|
+ }
|
|
|
+ if (this.setting[i].contentType == 6 && (this.setting[i].videoUrl == null || this.setting[i].videoUrl == "")) {
|
|
|
+ return this.$message.error("视频不能为空")
|
|
|
+ }
|
|
|
+ if (this.setting[i].contentType == 7 && (this.setting[i].value == null || this.setting[i].value == "")) {
|
|
|
+ return this.$message.error("语音不能为空")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.sendMsgOpen.open = false;
|
|
|
+
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: '正在执行中请稍后~~请不要刷新页面！！',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ });
|
|
|
+
|
|
|
+ sendMsg(this.msgForm).then(response => {
|
|
|
+ this.msgSuccess("一键群发成功");
|
|
|
+ loading.close();
|
|
|
+ this.setting=[];
|
|
|
+ this.resetSendMsgSop();
|
|
|
+ }).finally(()=>{
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cancelMsgForm(){
|
|
|
+ this.sendMsgOpen.open = false;
|
|
|
+ this.resetSendMsgSop();
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
