|
|
@@ -0,0 +1,3269 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container sop-temp-container"
|
|
|
+ v-loading="!form.id"
|
|
|
+ element-loading-text="页面加载中..."
|
|
|
+ element-loading-background="rgba(255, 255, 255, 0.95)">
|
|
|
+ <!-- 页面头部 -->
|
|
|
+<!-- <div class="page-header">-->
|
|
|
+<!-- <div class="header-title">-->
|
|
|
+<!-- <i class="el-icon-document"></i>-->
|
|
|
+<!-- <span v-if="this.form.sendType == 1 && formType==1">sop规则【修改企微接口】模板</span>-->
|
|
|
+<!-- <span v-if="this.form.sendType == 1 && formType==2">sop规则【复制企微接口】模板</span>-->
|
|
|
+<!-- <span v-if="this.form.sendType == 1 && formType==3">sop规则【查看企微接口】模板</span>-->
|
|
|
+<!-- <span v-if="this.form.sendType == 2 && formType==1">sop规则【修改群发助手】模板</span>-->
|
|
|
+<!-- <span v-if="this.form.sendType == 2 && formType==2">sop规则【复制群发助手】模板</span>-->
|
|
|
+<!-- <span v-if="this.form.sendType == 2 && formType==3">sop规则【查看群发助手】模板</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="header-subtitle">-->
|
|
|
+<!-- <span class="template-id">模板编号：{{ this.form.id }}</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+ <!-- 表单内容区 -->
|
|
|
+ <div class="form-content">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="sop-form">
|
|
|
+ <!-- 基本信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ <span>基本信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-items">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">名称</span>
|
|
|
+ <span class="info-value">{{ form.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">状态</span>
|
|
|
+ <el-tag v-for="dict in statusOptions" v-if="dict.dictValue == form.status" :key="dict.dictValue" size="small">{{ dict.dictLabel }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">间隔天数</span>
|
|
|
+ <span class="info-value">{{ form.gap }}天</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">模板编号</span>
|
|
|
+ <span class="info-value">{{ form.id }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <!-- 规则配置 -->
|
|
|
+ <el-form-item label="规则" prop="setting" class="rule-form-item">
|
|
|
+ <div class="rule-actions">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="small"
|
|
|
+ @click='addSetting()'
|
|
|
+ v-if="formType != 3 && roles.includes('add_sop_temp_day')">
|
|
|
+ 添加天数
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-sort"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click='openUpdateDaySorts()'
|
|
|
+ v-if="formType != 3">
|
|
|
+ 修改天数排序
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-sort"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click='openUpdateSorts()'
|
|
|
+ v-if=" formType != 3">
|
|
|
+ 修改规则排序
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-tabs v-model="tabIndex" type="card" @tab-remove="delSetting" v-if="setting && setting.length > 0"
|
|
|
+ :before-leave="leave" @tab-click="tabClick" class="rule-tabs">
|
|
|
+ <el-tab-pane v-for="(item, index) in setting" :closable="formType != 3 && roles.includes('del_sop_temp_day')" :key="index" :name="index + ''">
|
|
|
+ <el-badge slot="label" :is-dot="!item.id" class="item" style="display: inline-block">
|
|
|
+ <span>{{ '第' + item.dayNum + '天' }}</span>
|
|
|
+ </el-badge>
|
|
|
+ <el-row v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(255, 255, 255, 0.9)" class="tab-content-row">
|
|
|
+ <el-col :span="22">
|
|
|
+ <el-card shadow="never" class="day-content-card">
|
|
|
+ <el-form :model="item" label-width="100px" class="content-form">
|
|
|
+ <el-form-item v-if="form.sendType != 4" label="内容名称" style="height: 50px;">
|
|
|
+ <el-input :disabled="formType == 3" v-model="item.name"
|
|
|
+ placeholder="内容名称,仅内部可见"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="课程" v-if="form.sendType == 11 && item.content && item.content.length > 0" required>
|
|
|
+ <el-select :disabled="((formType == 3 || form.sendType == 11) && item.id != null) || !roles.includes('update_sop_temp_scourse')" v-model="item.content[0].courseId"
|
|
|
+ placeholder="请选择课程" style=" margin-right: 10px;" size="mini" remote
|
|
|
+ filterable
|
|
|
+ @change="courseChangeUpdate(item.content[0], index, 0)">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in courseList"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select :disabled="((formType == 3 || form.sendType == 11) && item.id != null) || !roles.includes('update_sop_temp_scourse')" v-model="item.content[0].videoId"
|
|
|
+ placeholder="请选择小节" size="mini" style=" margin-right: 10px;" remote
|
|
|
+ filterable
|
|
|
+ @change="videoIdChange(item.content[0],index,0)">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in videoList[0]"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规则" class="rule-content-item">
|
|
|
+ <div v-for="(content, contentIndex) in item.content" :key="contentIndex"
|
|
|
+ class="content-item-card">
|
|
|
+ <div class="content-item-header">
|
|
|
+ <span class="content-item-title">
|
|
|
+ <i class="el-icon-s-order"></i>
|
|
|
+ 规则 {{ contentIndex + 1 }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col el-col :span="22">
|
|
|
+ <el-form :model="content" label-width="100px" class="content-form">
|
|
|
+ <div v-if="item.dayNum==1">
|
|
|
+ <el-form-item label="时间" v-if="form.sendType != 4" class="inline-form-item">
|
|
|
+ <el-time-picker
|
|
|
+ :disabled="formType == 3 || !roles.includes('update_sop_temp_time')"
|
|
|
+ class="custom-input"
|
|
|
+ v-model="content.time"
|
|
|
+ value-format="HH:mm"
|
|
|
+ format="HH:mm"
|
|
|
+ :picker-options="{ selectableRange: ['01:00:00 - 01:59:00','05:00:00 - 23:59:59'] }"
|
|
|
+ placeholder="时间"
|
|
|
+ style="width: 120px;">
|
|
|
+ </el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-form-item label="时间" v-if="form.sendType != 4" class="inline-form-item">
|
|
|
+ <el-time-picker
|
|
|
+ :disabled="formType == 3 || !roles.includes('update_sop_temp_time')"
|
|
|
+ class="custom-input"
|
|
|
+ v-model="content.time"
|
|
|
+ :picker-options="{ selectableRange: ['00:01:00 - 00:59:00','05:00:00 - 23:59:59']}"
|
|
|
+ value-format="HH:mm"
|
|
|
+ format="HH:mm"
|
|
|
+ placeholder="时间"
|
|
|
+ style="width: 120px;">
|
|
|
+ </el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="官方群发" v-if="contentIndex==0 && content.type==2 && form.sendType != 4" class="switch-form-item">
|
|
|
+ <el-switch
|
|
|
+ v-model="content.isOfficial"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#DCDFE6"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0">
|
|
|
+ </el-switch>
|
|
|
+ <div class="form-tip-info">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ 请注意：官方群发 【第1天】 只能设置1点-1点30 的时间，【其他天数时间】 只能设置0点-0点30。此处仅为生成发送记录时间，实际发送可由 销售在公司规定的 【暂早上8点(前！！)】，在企业微信的【群发助手】处点击发送
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="是否@所有人" v-if="form.sendType != 4" class="switch-form-item">
|
|
|
+ <el-switch
|
|
|
+ v-model="content.isAtAll"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#DCDFE6"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0">
|
|
|
+ </el-switch>
|
|
|
+ <div class="form-tip-info">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ 开启后将在群发消息时@所有人（默认关闭）
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="消息类型" v-if="form.sendType != 4">
|
|
|
+ <el-select :disabled="formType == 3" v-model="content.courseType"
|
|
|
+ placeholder="请选择消息类型" size="mini"
|
|
|
+ style=" margin-right: 10px;" v-if="content.type != 4 ">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in sysFsSopWatchStatus"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="Number(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="消息类别" v-if="form.sendType != 4 && form.sendType != 5" class="msg-category-item">
|
|
|
+ <el-radio-group v-model="content.type"
|
|
|
+ :disabled="formType == 3 || content.isOfficial === '1'"
|
|
|
+ @change="updateHtml(() => content.contentType = '1',content)">
|
|
|
+ <el-radio :label="1">普通</el-radio>
|
|
|
+ <el-radio :label="2">课程</el-radio>
|
|
|
+ <el-radio :label="4">AI触达</el-radio>
|
|
|
+ <el-radio :label="5">打标签</el-radio>
|
|
|
+ <el-radio :label="20">直播间</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="直播间" v-if="content.type == 20">
|
|
|
+ <el-select v-model="content.liveId"
|
|
|
+ filterable
|
|
|
+ placeholder="请选择直播间" size="mini"
|
|
|
+ @change="liveChangeContent(content)" >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in liveList"
|
|
|
+ :key="dict.liveId"
|
|
|
+ :label="dict.liveName"
|
|
|
+ :value="dict.liveId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="课程选择" v-if="content.type == 2 && form.sendType != 5" required class="course-select-item">
|
|
|
+ <div class="course-select-row">
|
|
|
+ <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.courseId"
|
|
|
+ placeholder="请选择课程" size="small" remote
|
|
|
+ filterable
|
|
|
+ @change="courseChangeUpdate(content,index,contentIndex)">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in courseList"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.videoId"
|
|
|
+ placeholder="请选择小节" size="small" remote
|
|
|
+ filterable
|
|
|
+ @change="videoIdChange(content,index,contentIndex)">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in videoList[contentIndex]"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="course-type-row" v-if="content.type != 4">
|
|
|
+ <el-select :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="content.courseType"
|
|
|
+ placeholder="请选择消息类型" size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in sysFsSopWatchStatus"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="Number(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="AI触达" v-if="content.type == 4">
|
|
|
+ <el-select :disabled="formType == 3" v-model="content.aiTouch"
|
|
|
+ placeholder="请选择Ai触达类型" size="mini"
|
|
|
+ style=" margin-right: 10px;" v-if="content.type == 4 ">
|
|
|
+ <el-option label="非首次交流" value="非首次交流"></el-option>
|
|
|
+ <el-option label="首次交流1" value="首次交流1"></el-option>
|
|
|
+ <el-option label="首次交流2" value="首次交流2"></el-option>
|
|
|
+ <el-option label="交流状态1" value="交流状态1"></el-option>
|
|
|
+ <el-option label="交流状态2" value="交流状态2"></el-option>
|
|
|
+ <el-option label="交流状态3" value="交流状态3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="添加标签" prop="addTag" v-if="content.type == 5 "
|
|
|
+ v-model="content.addTag">
|
|
|
+
|
|
|
+ <el-tag
|
|
|
+ :key="tag"
|
|
|
+ v-for="tag in content.addTag"
|
|
|
+ closable
|
|
|
+ :disable-transitions="false"
|
|
|
+ @close="handleClose(contentIndex,tag,content)">
|
|
|
+ {{ tag }}
|
|
|
+ </el-tag>
|
|
|
+ <el-input
|
|
|
+ style="width:110px"
|
|
|
+ class="input-new-tag"
|
|
|
+ v-if="addTag[contentIndex] && addTag[contentIndex].inputVisible"
|
|
|
+ v-model="addTag[contentIndex].inputValue"
|
|
|
+ ref="saveTagInput"
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleInputConfirm(contentIndex,content)"
|
|
|
+ @blur="handleInputConfirm(contentIndex,content)"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button v-else class="button-new-tag" size="small" style="width: 110px"
|
|
|
+ @click="showInput(contentIndex)">新增标签
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="移除标签" prop="remarkMobiles" v-if="content.type == 5 ">
|
|
|
+
|
|
|
+ <el-tag
|
|
|
+ :key="tag"
|
|
|
+ v-for="tag in content.delTag"
|
|
|
+ closable
|
|
|
+ :disable-transitions="false"
|
|
|
+ @close="handleCloseDel(contentIndex,tag,content)">
|
|
|
+ {{ tag }}
|
|
|
+ </el-tag>
|
|
|
+ <el-input
|
|
|
+ style="width:110px"
|
|
|
+ class="input-new-tag"
|
|
|
+ v-if="addTag[contentIndex] && addTag[contentIndex].delTagVisible"
|
|
|
+ v-model="addTag[contentIndex].delTagValue"
|
|
|
+ ref="saveTagInputDel"
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleInputConfirmDel(contentIndex,content)"
|
|
|
+ @blur="handleInputConfirmDel(contentIndex,content)"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button v-else class="button-new-tag" size="small" style="width: 110px"
|
|
|
+ @click="showInputDel(contentIndex)">新增标签
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <div v-for="(setList, setIndex) in content.setting" :key="setIndex"
|
|
|
+ class="setting-item-card"
|
|
|
+ v-if="content.type != 4 && content.type != 5">
|
|
|
+ <div class="setting-item-header">
|
|
|
+ <span class="setting-item-title">
|
|
|
+ <i class="el-icon-document"></i>
|
|
|
+ 内容 {{ setIndex + 1 }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-row class="setting-content">
|
|
|
+ <el-col :span="22">
|
|
|
+ <el-form :model="setList" label-width="100px" class="content-form">
|
|
|
+ <el-form-item label="内容类别" class="content-type-item">
|
|
|
+ <div v-if="form.sendType == 1 ">
|
|
|
+ <el-radio-group v-model="setList.contentType" :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')">
|
|
|
+ <!-- <el-radio :label="item.dictValue" v-for="item in sysQwSopContentType">{{item.dictLabel}}</el-radio>-->
|
|
|
+ <el-radio
|
|
|
+ v-for="item in sysQwSopContentType"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictValue"
|
|
|
+ :disabled="item.dictValue === '1' && content.setting.some(s => s.contentType == '1') ">
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div v-if="form.sendType == 2">
|
|
|
+ <el-radio-group v-model="setList.contentType"
|
|
|
+ :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
|
|
|
+ @change="handleContentTypeChange(content,index,contentIndex,setIndex, item, 'contentType', $event)">
|
|
|
+ <el-radio
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictValue"
|
|
|
+ :disabled="(content.type!=2 && item.dictValue === '9') || (content.isOfficial==1 && ['5','6','7','8','9'].includes(item.dictValue))"
|
|
|
+ v-for="item in sysQwSopAiContentType">{{ item.dictLabel }}
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div v-if=" form.sendType == 4">
|
|
|
+ <el-radio-group v-model="setList.contentType"
|
|
|
+ :disabled="formType == 3"
|
|
|
+ @change="handleContentTypeChange(content,index,contentIndex,setIndex)">
|
|
|
+ <el-radio
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictValue"
|
|
|
+ :disabled="((content.type!=2 || form.sendType == 4) && (item.dictValue === '8' || item.dictValue === '9') || (content.isOfficial==1 && ['5','6','7','8','9'].includes(item.dictValue)))"
|
|
|
+ v-for="item in sysQwSopAiContentType">{{ item.dictLabel }}
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div v-if="form.sendType == 11">
|
|
|
+ <el-radio-group v-model="setList.contentType"
|
|
|
+ :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)"
|
|
|
+ @change="handleContentTypeChange(content,index,contentIndex,setIndex, item, 'contentType', $event)">
|
|
|
+ <el-radio
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictValue"
|
|
|
+ :disabled="(content.type!=2 && item.dictValue === '9') || (content.isOfficial==1 && ['5','6','7','8','9'].includes(item.dictValue))"
|
|
|
+ v-for="item in sysQwSopAiContentType"
|
|
|
+ v-if="courseTypeList.includes(item.dictValue)">{{ item.dictLabel }}
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容">
|
|
|
+ <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-if="setList.contentType == 1 || setList.contentType == 15"
|
|
|
+ v-model="setList.value"
|
|
|
+ type="textarea" :rows="3" placeholder="内容"
|
|
|
+ style="width: 90%;margin-top: 10px;"
|
|
|
+ @keydown.native="handleKeydown($event, index, contentIndex, setIndex)"
|
|
|
+ :ref="`textarea-${index}-${contentIndex}-${setIndex}`"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="content-actions">
|
|
|
+ <el-button
|
|
|
+ v-if="(setList.contentType == 1 || setList.contentType == 15) && roles.includes('edit_sop_temp_content')"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="small"
|
|
|
+ @click="toggleSalesCall(index, contentIndex, setIndex)">
|
|
|
+ {{ setList.isSalesCallAdded ? '移除#销售称呼#' : '添加#销售称呼#' }}
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="(setList.contentType == 1 || setList.contentType == 15) && roles.includes('edit_sop_temp_content')"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-user"
|
|
|
+ size="small"
|
|
|
+ @click="toggleUserNameCall(index, contentIndex, setIndex)">
|
|
|
+ {{ setList.isUserNameCallAdded ? '移除#客户称呼#' : '添加#客户称呼#' }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="setList.contentType == 2">
|
|
|
+ <el-card class="box-card image-card">
|
|
|
+ <div slot="header" class="card-header-mini">
|
|
|
+ <i class="el-icon-picture-outline"></i>
|
|
|
+ <span>图片内容</span>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="上传图片" required>
|
|
|
+ <ImageUpload :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
|
|
|
+ v-model="setList.imgUrl"
|
|
|
+ type="image" :num="1" :width="150" :height="150"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="(setList.contentType == 3 || item.contentType ==9) || (setList.contentType == 9 && content.type==2 )">
|
|
|
+ <el-card class="box-card link-card">
|
|
|
+ <div slot="header" class="card-header-mini">
|
|
|
+ <i class="el-icon-link"></i>
|
|
|
+ <span>链接内容</span>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="链接标题" label-width="100px" required>
|
|
|
+ <el-input :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)" v-model="setList.linkTitle"
|
|
|
+ @change="updateAll(setIndex, item, 'linkTitle', $event)"
|
|
|
+ placeholder="请输入链接标题"
|
|
|
+ style="width: 90%;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接描述" label-width="100px" required>
|
|
|
+ <el-input :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)" type="textarea" :rows="3"
|
|
|
+ v-model="setList.linkDescribe"
|
|
|
+ @change="updateAll(setIndex, item, 'linkDescribe', $event)"
|
|
|
+ placeholder="请输入链接描述"
|
|
|
+ style="width: 90%;margin-top: 1%;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接封面" label-width="100px" required>
|
|
|
+ <ImageUpload :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)" v-model="setList.linkImageUrl"
|
|
|
+ type="image" :num="1"
|
|
|
+ @input="updateAll(setIndex, item, 'linkImageUrl', $event)"
|
|
|
+ :file-size="2" :width="150" :height="150"
|
|
|
+ style="margin-top: 1%;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="content.type != 2" class="link-url-section">
|
|
|
+ <el-form-item label="链接地址" label-width="100px" required>
|
|
|
+ <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="setList.linkUrl"
|
|
|
+ placeholder="请输入链接地址"
|
|
|
+ style="width: 90%;"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-if="content.type == 2" class="link-tip-section">
|
|
|
+ <el-form-item label="链接地址" label-width="100px">
|
|
|
+ <el-tag type="warning" v-model="setList.isBindUrl = 1 ">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ 选择的课程小节即为卡片链接地址
|
|
|
+ </el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="setList.contentType == 4 || setList.contentType == 10 || setList.contentType == 17 || setList.contentType == 23">
|
|
|
+ <el-card class="box-card miniprogram-card">
|
|
|
+ <div slot="header" class="card-header-mini">
|
|
|
+ <i class="el-icon-mobile-phone"></i>
|
|
|
+ <span>小程序内容</span>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="标题" prop="miniprogramTitle" required>
|
|
|
+ <el-input v-model="setList.miniprogramTitle"
|
|
|
+ :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)"
|
|
|
+ @change="updateAll(setIndex, item, 'miniprogramTitle', $event)"
|
|
|
+ placeholder="请输入小程序消息标题，最长为64字节" :rows="2"
|
|
|
+ maxlength="64" type="textarea"
|
|
|
+ @input="checkByteLength(content,setList.contentType,content.isOfficial)"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="封面" prop="miniprogramPicUrl" required>
|
|
|
+ <ImageUpload v-if="content.isOfficial !== '1'"
|
|
|
+ @change="updateAll(setIndex, item, 'miniprogramPicUrl', $event)"
|
|
|
+ :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)"
|
|
|
+ v-model="setList.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="setList.miniprogramAppid='wx73f85f8d62769119' " :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
|
|
|
+ disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="page路径" prop="miniprogramPage" v-show="setList.contentType == 10"
|
|
|
+ label-width="100px" style="margin-left: -30px">
|
|
|
+ <el-input v-model="setList.miniprogramPage"
|
|
|
+ :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
|
|
|
+ placeholder="小程序消息打开后的路径" type="textarea" :rows="3" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div v-if="setList.contentType == 12 || setList.contentType == 18 || setList.contentType == 19 || setList.contentType == 24">
|
|
|
+ <el-card class="box-card miniprogram-card">
|
|
|
+ <div slot="header" class="card-header-mini">
|
|
|
+ <i class="el-icon-video-camera"></i>
|
|
|
+ <span>直播小程序</span>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="直播间" required>
|
|
|
+ <el-select v-model="setList.liveId"
|
|
|
+ placeholder="请选择直播间" size="mini"
|
|
|
+ filterable
|
|
|
+ :disabled="content.type==20"
|
|
|
+ @change="liveChange(setList)" >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in liveList"
|
|
|
+ :key="dict.liveId"
|
|
|
+ :label="dict.liveName"
|
|
|
+ :value="dict.liveId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="标题" prop="miniprogramTitle" required>
|
|
|
+ <el-input :disabled="content.type==20" v-model="setList.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
|
|
|
+ type="textarea" @input="checkByteLength(content,setList.contentType,content.isOfficial)" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="封面" prop="miniprogramPicUrl" required>
|
|
|
+ <ImageUpload :disabled="content.type==20" v-model="setList.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="setList.miniprogramAppid='wxcfd4cd6e2375e42f' " 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="setList.miniprogramPage" placeholder="小程序消息打开后的路径" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div v-if="setList.contentType == 5">
|
|
|
+ <el-card class="box-card upload-card">
|
|
|
+ <div slot="header" class="card-header-mini">
|
|
|
+ <i class="el-icon-document"></i>
|
|
|
+ <span>文件上传</span>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="上传文件" prop="fileUrl" label-width="100px" required>
|
|
|
+ <el-upload
|
|
|
+ :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
|
|
|
+ v-model="setList.fileUrl"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="(res, file) => handleAvatarSuccessFile(res, file, setList)"
|
|
|
+ :before-upload="beforeAvatarUploadFile">
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <el-link v-if="setList.fileUrl" type="primary"
|
|
|
+ :href="downloadUrl(setList.fileUrl)" download>
|
|
|
+ {{ setList.fileUrl }}
|
|
|
+ </el-link>
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="setList.contentType == 6">
|
|
|
+ <el-card class="box-card upload-card">
|
|
|
+ <div slot="header" class="card-header-mini">
|
|
|
+ <i class="el-icon-video-play"></i>
|
|
|
+ <span>视频上传</span>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="上传视频" prop="videoUrl" label-width="100px" required>
|
|
|
+ <el-upload
|
|
|
+ :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
|
|
|
+ v-model="setList.videoUrl"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="(res, file) => handleAvatarSuccessVideo(res, file, setList)"
|
|
|
+ :before-upload="beforeAvatarUploadVideo">
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <video v-if="setList.videoUrl"
|
|
|
+ :src="setList.videoUrl"
|
|
|
+ controls style="width: 200px;height: 100px">
|
|
|
+ </video>
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div v-if="setList.contentType == 7 || setList.contentType == 16">
|
|
|
+ <el-input
|
|
|
+ :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
|
|
|
+ v-model="setList.value"
|
|
|
+ type="textarea" :rows="3" maxlength="66" show-word-limit
|
|
|
+ placeholder="输入要转为语音的内容"
|
|
|
+ style="width: 90%;margin-top: 10px;"
|
|
|
+ @input="handleInputVideoText(setList.value,setList)"/>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div v-if="setList.contentType == 8 ">
|
|
|
+ <el-button :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" type="primary"
|
|
|
+ style="margin-bottom: 1%"
|
|
|
+ @click="hanldeSelectVideoNum(content,index,contentIndex,setIndex)">
|
|
|
+ 选择视频号
|
|
|
+ </el-button>
|
|
|
+ <el-card class="box-card" v-if="setList.coverUrl">
|
|
|
+ <el-form-item label="封面标题:" label-width="100px">
|
|
|
+ <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="setList.nickname"
|
|
|
+ style="width: 90%;margin-bottom: 1%" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="头像:" label-width="100px">
|
|
|
+ <el-image
|
|
|
+ v-if="setList.avatar != null"
|
|
|
+ :src="setList.avatar"
|
|
|
+ :preview-src-list="[setList.avatar]"
|
|
|
+ :style="{ width: '50px', height: '50px' }"
|
|
|
+ ></el-image>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="封面:" label-width="100px">
|
|
|
+ <el-image
|
|
|
+ v-if="setList.coverUrl != null"
|
|
|
+ :src="setList.coverUrl"
|
|
|
+ :preview-src-list="[setList.coverUrl]"
|
|
|
+ :style="{ width: '200px', height: '200px' }"
|
|
|
+ ></el-image>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="简介:" label-width="100px">
|
|
|
+ <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" type="textarea" :rows="3"
|
|
|
+ v-model="setList.desc"
|
|
|
+ style="width: 90%;margin-top: 1%;" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="视频地址:" label-width="100px"
|
|
|
+ style="margin-top: 1%">
|
|
|
+ <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="setList.url"
|
|
|
+ style="width: 90%;" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div v-if="setList.contentType == 14">
|
|
|
+ <el-card class="box-card luckybag-card">
|
|
|
+ <div slot="header" class="card-header-mini">
|
|
|
+ <i class="el-icon-present"></i>
|
|
|
+ <span>福袋设置</span>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="福袋名称" required>
|
|
|
+ <el-select :disabled="formType == 3" v-model="setList.luckyBagId"
|
|
|
+ placeholder="请选择福袋" size="mini"
|
|
|
+ @change="getLuckyBagStatus(setList)" >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in luckyBagList"
|
|
|
+ :key="dict.id"
|
|
|
+ :label="dict.name"
|
|
|
+ :value="dict.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="福袋状态">
|
|
|
+ <el-tag :disabled="formType == 3" :type="setList.luckyBagDataStatus == 1 ? 'success' : 'danger'">
|
|
|
+ {{ setList.luckyBagDataStatus == 1 ? '启用' : '禁用' }}
|
|
|
+ </el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div v-if="setList.contentType == 11">
|
|
|
+ <el-input
|
|
|
+ :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
|
|
|
+ v-model="setList.value"
|
|
|
+ type="textarea"
|
|
|
+ :rows="5"
|
|
|
+ placeholder="请输入群公告内容"
|
|
|
+ style="width: 90%;margin-top: 10px;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="setList.contentType == 21">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-form-item label="短信模板" >
|
|
|
+ <el-select v-model="setList.smsTemplateId"
|
|
|
+ placeholder="请选择短信模板" size="mini"
|
|
|
+ @change="getSmsTemplateInfo(setList)" >
|
|
|
+ <el-option
|
|
|
+ v-for="template in smsTemplateList"
|
|
|
+ :key="template.tempId"
|
|
|
+ :label="template.title"
|
|
|
+ :value="template.tempId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容预览" v-if="setList.smsTemplateContent">
|
|
|
+ <div style="color: #666; font-size: 12px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9; max-height: 100px; overflow-y: auto;">
|
|
|
+ {{ setList.smsTemplateContent }}
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="课节过期时间"
|
|
|
+ v-if="content.type == 2 && (setList.isBindUrl == '1' || setList.contentType==4) && setList.contentType != 2 && setList.contentType != 5 && setList.contentType != 6 && setList.contentType != 8 && setList.contentType != 9 && setList.contentType != 10 ">
|
|
|
+ <el-row>
|
|
|
+ <el-input type="number" v-model="setList.expiresDays"
|
|
|
+ :disabled="!roles.includes('edit_sop_temp_content') && (formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0))"
|
|
|
+ @change="updateAll(setIndex, item, 'expiresDays', $event)"
|
|
|
+ style="width: 200px">
|
|
|
+ <template slot="append">天</template>
|
|
|
+ </el-input>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <span class="tip">填写0或不填时，默认为系统配置的默认时间</span>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <el-form v-if="form.sendType == 4" :model="setList" label-width="100px" class="content-form">
|
|
|
+ <el-form-item label="添加客服" v-if="item.dayNum==1" prop="intervalTime" style="margin: 2%">
|
|
|
+ <el-input-number
|
|
|
+ v-model="setList.intervalTime"
|
|
|
+ :min="1"
|
|
|
+ :max="1440"
|
|
|
+ style="width:150px;margin-top: 10px;"
|
|
|
+ >
|
|
|
+ </el-input-number>
|
|
|
+ <span class="tip">单位：分钟，最大1440分钟(24小时)</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间" v-if="item.dayNum > 1" class="inline-form-item">
|
|
|
+ <el-time-picker
|
|
|
+ class="custom-input"
|
|
|
+ v-model="setList.time"
|
|
|
+ value-format="HH:mm"
|
|
|
+ format="HH:mm"
|
|
|
+ :picker-options="{ selectableRange: ['01:00:00 - 01:59:00','05:00:00 - 23:59:59'] }"
|
|
|
+ placeholder="时间"
|
|
|
+ style="width: 120px;">
|
|
|
+ </el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发送用户类型" style="margin: 2%">
|
|
|
+ <el-select v-model="setList.onlyUnregistered" placeholder="请选择" style="width: 150px;">
|
|
|
+ <el-option label="已注册" value="1"></el-option>
|
|
|
+ <el-option label="未注册" value="2"></el-option>
|
|
|
+ <el-option label="未对话" value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="form-tip-info">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ 给用户发送的类型，默认为未对话（即客户没给你对话 就）
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1" :offset="1">
|
|
|
+ <i class="el-icon-delete" @click="delSetList(index,contentIndex,setIndex)"
|
|
|
+ style="margin-top: 20px;"
|
|
|
+ v-if="content.setting.length>1 && (formType != 3) && roles.includes('del_sop_temp_content') && !(form.sendType == 11 && setIndex == 0)"></i>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-link type="primary" class="el-icon-plus" :underline="false"
|
|
|
+ @click='addSetList(contentIndex,item.content)'
|
|
|
+ v-if="content.type != 4 && formType != 3 && roles.includes('add_sop_temp_content')">添加内容
|
|
|
+ </el-link>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1" :offset="1">
|
|
|
+ <i class="el-icon-delete" @click="delContent(index,contentIndex)"
|
|
|
+ style="margin-top: 20px;"
|
|
|
+ v-if="item.content.length>1 && formType != 3 && roles.includes('del_sop_temp_rule')"></i>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-link type="primary" class="el-icon-plus" :underline="false" @click='addContent(index)'
|
|
|
+ v-if="formType != 3 && form.sendType != 4 && roles.includes('add_sop_temp_rule')">添加规则
|
|
|
+ </el-link>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <div style="float: right;" v-if="formType != 3 && roles.includes('update_sop_temp_day')">
|
|
|
+ <el-button type="primary" @click="save" v-if="!item.voice || item.voice == 0">
|
|
|
+ 保存（{{ '第' + (1 + (form.gap * index)) + '天' }}）
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" disabled v-if="item.voice == 1">语言生成中</el-button>
|
|
|
+ <el-button type="primary" @click="leave(tabIndex)" v-if="item.voice == 1">刷新状态</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog :title="videoNumOptions.title" :visible.sync="videoNumOptions.open" style="width: 1500px;height: 100%"
|
|
|
+ append-to-body>
|
|
|
+ <userVideo ref="QwUserVideo" @videoResult="qwUserVideoResult"></userVideo>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="修改天数排序" :visible.sync="openSort" width="600px" append-to-body class="sort-dialog">
|
|
|
+ <div class="sort-dialog-content">
|
|
|
+ <div class="sort-tip">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ 拖动按钮调整顺序，红色表示顺序已变更
|
|
|
+ </div>
|
|
|
+ <draggable v-model="dayList" @end="onDragEndDay" class="sort-button-group">
|
|
|
+ <el-button
|
|
|
+ v-for="(item, index) in dayList"
|
|
|
+ :key="index"
|
|
|
+ :class="['sort-button', item.newDay != item.dayNum ? 'changed' : '']"
|
|
|
+ icon="el-icon-rank">
|
|
|
+ 第{{ item.newDay }}天
|
|
|
+ <span v-if="item.newDay != item.dayNum" class="origin-day">(原第{{ item.dayNum }}天)</span>
|
|
|
+ </el-button>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="openSort = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="saveSorts" icon="el-icon-check">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="修改规则排序" :visible.sync="openSort2" width="600px" append-to-body class="sort-dialog">
|
|
|
+ <div class="sort-dialog-content">
|
|
|
+ <div class="sort-tip">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ 拖动按钮调整规则发送顺序
|
|
|
+ </div>
|
|
|
+ <draggable v-model="ruleList" @end="onDragEnd" class="sort-button-group">
|
|
|
+ <el-button
|
|
|
+ v-for="(item, index) in ruleList"
|
|
|
+ :key="index"
|
|
|
+ class="sort-button"
|
|
|
+ icon="el-icon-time">
|
|
|
+ {{ item.time }}
|
|
|
+ </el-button>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="openSort2 = false">取消</el-button>
|
|
|
+ <el-button @click="autoSortsRules" icon="el-icon-sort">自动排序</el-button>
|
|
|
+ <el-button type="primary" @click="saveSortsRules" icon="el-icon-check">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-button {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.red:hover {
|
|
|
+ color: #dbdbdb !important;
|
|
|
+}
|
|
|
+
|
|
|
+.red {
|
|
|
+ background-color: #F56C6C !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-input ::v-deep .el-input__inner {
|
|
|
+ height: 20px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-input ::v-deep .el-input__icon {
|
|
|
+ line-height: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-delete {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-badge__content.is-fixed {
|
|
|
+ top: 10px !important;
|
|
|
+ right: 0 !important;
|
|
|
+ width: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.tip {
|
|
|
+ color: #909399;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.sortable-ghost {
|
|
|
+ background: rgb(26, 164, 255) !important;
|
|
|
+ color: #FFF !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 页面头部样式 ===== */
|
|
|
+.sop-temp-container {
|
|
|
+ padding: 20px;
|
|
|
+ background: #f5f7fa;
|
|
|
+}
|
|
|
+
|
|
|
+.page-header {
|
|
|
+ background: linear-gradient(135deg, #1890ff 0%, #0066cc 100%);
|
|
|
+ padding: 20px 30px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: 0 2px 12px rgba(24, 144, 255, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.header-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-title i {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-subtitle {
|
|
|
+ padding-left: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.template-id {
|
|
|
+ display: inline-block;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 表单内容区样式 ===== */
|
|
|
+.form-content {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+/* 基本信息卡片 */
|
|
|
+.info-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card ::v-deep .el-card__header {
|
|
|
+ padding: 12px 20px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card .card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card .card-header i {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 基本信息项目布局 */
|
|
|
+.info-items {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 16px;
|
|
|
+ padding: 8px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-label {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 13px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.info-label::after {
|
|
|
+ content: '：';
|
|
|
+}
|
|
|
+
|
|
|
+.info-value {
|
|
|
+ color: #303133;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item .el-tag {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 规则配置样式 */
|
|
|
+.rule-form-item {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-form-item ::v-deep .el-form-item__label {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-actions {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding: 12px;
|
|
|
+ background: #f9f9f9;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-actions .el-button {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 规则标签页样式 */
|
|
|
+.rule-tabs {
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-tabs ::v-deep .el-tabs__header {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-tabs ::v-deep .el-tabs__item {
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-tabs ::v-deep .el-tabs__item.is-active {
|
|
|
+ background: #1890ff;
|
|
|
+ color: #fff;
|
|
|
+ border-color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 红点样式优化 - 未选中状态 */
|
|
|
+.rule-tabs ::v-deep .el-badge__content.is-dot {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ top: -3px;
|
|
|
+ right: -8px;
|
|
|
+ background-color: #f56c6c;
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 红点样式优化 - 选中状态 */
|
|
|
+.rule-tabs ::v-deep .el-tabs__item.is-active .el-badge__content.is-dot {
|
|
|
+ background-color: #faad14;
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 标签内容区域 */
|
|
|
+.tab-content-row {
|
|
|
+ min-height: 300px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 加载动画优化 */
|
|
|
+.tab-content-row ::v-deep .el-loading-mask {
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-content-row ::v-deep .el-loading-spinner {
|
|
|
+ top: 40%;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-content-row ::v-deep .el-loading-spinner .circular {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-content-row ::v-deep .el-loading-spinner .el-loading-text {
|
|
|
+ color: #1890ff;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 天内容卡片 */
|
|
|
+.day-content-card {
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.day-content-card ::v-deep .el-card__body {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 内容项卡片 */
|
|
|
+.content-item-card {
|
|
|
+ background-color: #fafafa;
|
|
|
+ padding: 16px;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.content-item-card:hover {
|
|
|
+ border-color: #1890ff;
|
|
|
+ box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 内容类别样式 */
|
|
|
+.content-type-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-type-item ::v-deep .el-form-item__label {
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-type-item ::v-deep .el-form-item__content {
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-type-item ::v-deep .el-radio-group {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px 20px;
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-type-item ::v-deep .el-radio {
|
|
|
+ margin-right: 0;
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表单优化 */
|
|
|
+.sop-form ::v-deep .el-form-item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .el-form-item__label {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 标签优化 */
|
|
|
+.sop-form ::v-deep .el-tag {
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 输入框优化 */
|
|
|
+.sop-form ::v-deep .el-input__inner,
|
|
|
+.sop-form ::v-deep .el-textarea__inner {
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .el-input__inner:focus,
|
|
|
+.sop-form ::v-deep .el-textarea__inner:focus {
|
|
|
+ border-color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 卡片样式统一 */
|
|
|
+.sop-form ::v-deep .el-card {
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .box-card {
|
|
|
+ margin-top: 12px;
|
|
|
+ background: #f9f9f9;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .box-card .el-card__body {
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 按钮组样式 */
|
|
|
+.sop-form ::v-deep .el-button-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 开关样式优化 */
|
|
|
+.sop-form ::v-deep .el-switch {
|
|
|
+ margin-right: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 提示信息样式 */
|
|
|
+.sop-form ::v-deep .el-form-item__content > div[style*="color: #999"] {
|
|
|
+ background: #f0f9ff;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border-left: 3px solid #1890ff;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .el-form-item__content > div[style*="color: #999"] i {
|
|
|
+ color: #1890ff;
|
|
|
+ margin-right: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 规则内容优化 ===== */
|
|
|
+.rule-content-item {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-content-item ::v-deep .el-form-item__label {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+/* 内容项卡片头部 */
|
|
|
+.content-item-header {
|
|
|
+ background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
|
|
|
+ padding: 12px 16px;
|
|
|
+ margin: -16px -16px 16px -16px;
|
|
|
+ border-bottom: 2px solid #1890ff;
|
|
|
+ border-radius: 6px 6px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.content-item-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.content-item-title i {
|
|
|
+ margin-right: 6px;
|
|
|
+ color: #1890ff;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 设置项卡片 */
|
|
|
+.setting-item-card {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e0e6ed;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding: 16px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.setting-item-card:hover {
|
|
|
+ border-color: #1890ff;
|
|
|
+ box-shadow: 0 2px 12px rgba(24, 144, 255, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.setting-item-header {
|
|
|
+ margin: -16px -16px 16px -16px;
|
|
|
+ padding: 10px 16px;
|
|
|
+ background: #f9fafb;
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ border-radius: 6px 6px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.setting-item-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.setting-item-title i {
|
|
|
+ margin-right: 6px;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.setting-content {
|
|
|
+ padding-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 内容表单统一样式 */
|
|
|
+.content-form ::v-deep .el-form-item__label {
|
|
|
+ padding-right: 8px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+/* 内联表单项 */
|
|
|
+.inline-form-item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.inline-form-item ::v-deep .el-form-item__content {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 开关表单项 */
|
|
|
+.switch-form-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.switch-form-item ::v-deep .el-form-item__label {
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.switch-form-item ::v-deep .el-form-item__content {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.switch-form-item ::v-deep .el-switch {
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表单提示信息 */
|
|
|
+.form-tip-info {
|
|
|
+ background: #f0f9ff;
|
|
|
+ color: #666;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 10px 14px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border-left: 3px solid #1890ff;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ line-height: 1.6;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-tip-info i {
|
|
|
+ color: #1890ff;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: 2px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 内容操作按钮 */
|
|
|
+.content-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-actions .el-button {
|
|
|
+ margin-left: 0;
|
|
|
+ padding: 8px 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-actions .el-button [class*="el-icon-"] {
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 消息类别 Radio 组优化 */
|
|
|
+.sop-form ::v-deep .el-radio {
|
|
|
+ margin-right: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .el-radio__label {
|
|
|
+ font-size: 13px;
|
|
|
+ padding-left: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Select 下拉框优化 */
|
|
|
+.sop-form ::v-deep .el-select {
|
|
|
+ margin-right: 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .el-select .el-input__inner {
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 标签输入优化 */
|
|
|
+.sop-form ::v-deep .el-tag {
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .input-new-tag {
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.sop-form ::v-deep .button-new-tag {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 小程序、福袋、上传卡片优化 ===== */
|
|
|
+.miniprogram-card,
|
|
|
+.luckybag-card,
|
|
|
+.upload-card {
|
|
|
+ margin-top: 12px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+
|
|
|
+.miniprogram-card ::v-deep .el-card__header,
|
|
|
+.luckybag-card ::v-deep .el-card__header,
|
|
|
+.upload-card ::v-deep .el-card__header {
|
|
|
+ padding: 0;
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.miniprogram-card ::v-deep .el-card__body,
|
|
|
+.luckybag-card ::v-deep .el-card__body,
|
|
|
+.upload-card ::v-deep .el-card__body {
|
|
|
+ padding: 16px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header-mini {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ padding: 10px 16px;
|
|
|
+ background: linear-gradient(135deg, #f9fafb 0%, #f0f4f8 100%);
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header-mini i {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+.miniprogram-card .el-form-item,
|
|
|
+.luckybag-card .el-form-item,
|
|
|
+.upload-card .el-form-item {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.miniprogram-card .el-form-item:last-child,
|
|
|
+.luckybag-card .el-form-item:last-child,
|
|
|
+.upload-card .el-form-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.miniprogram-card .el-form-item__label::before,
|
|
|
+.luckybag-card .el-form-item__label::before,
|
|
|
+.upload-card .el-form-item__label::before {
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 上传组件优化 */
|
|
|
+.avatar-uploader ::v-deep .el-upload {
|
|
|
+ border: 2px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader ::v-deep .el-upload:hover {
|
|
|
+ border-color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ line-height: 150px;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader ::v-deep .el-upload:hover .avatar-uploader-icon {
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 排序对话框优化 ===== */
|
|
|
+.sort-dialog ::v-deep .el-dialog {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-dialog ::v-deep .el-dialog__header {
|
|
|
+ background: linear-gradient(135deg, #1890ff 0%, #0066cc 100%);
|
|
|
+ padding: 16px 20px;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-dialog ::v-deep .el-dialog__title {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-dialog ::v-deep .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-dialog-content {
|
|
|
+ min-height: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-tip {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 14px;
|
|
|
+ background: #f0f9ff;
|
|
|
+ border-left: 3px solid #1890ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ color: #666;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-tip i {
|
|
|
+ color: #1890ff;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-button-group {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 20px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 6px;
|
|
|
+ min-height: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-button {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: move;
|
|
|
+ transition: all 0.3s;
|
|
|
+ border: 2px solid #e8e8e8;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-button:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ border-color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-button.changed {
|
|
|
+ background: linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%);
|
|
|
+ border-color: #ff4d4f;
|
|
|
+ color: #cf1322;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.origin-day {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 6px;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 12px;
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-footer .el-button {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 图片和链接卡片优化 ===== */
|
|
|
+.image-card,
|
|
|
+.link-card {
|
|
|
+ margin-top: 12px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card ::v-deep .el-card__header,
|
|
|
+.link-card ::v-deep .el-card__header {
|
|
|
+ padding: 0;
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card ::v-deep .el-card__body,
|
|
|
+.link-card ::v-deep .el-card__body {
|
|
|
+ padding: 16px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card .el-form-item,
|
|
|
+.link-card .el-form-item {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card .el-form-item:last-child,
|
|
|
+.link-card .el-form-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card .el-form-item__label::before,
|
|
|
+.link-card .el-form-item__label::before {
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 图片上传区域 */
|
|
|
+.image-card ::v-deep .image-upload {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 链接地址区域 */
|
|
|
+.link-url-section {
|
|
|
+ margin-top: 16px;
|
|
|
+ padding-top: 16px;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+.link-tip-section {
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 16px;
|
|
|
+ background: #fffbf0;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #ffe7ba;
|
|
|
+}
|
|
|
+
|
|
|
+.link-tip-section .el-tag {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 14px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.6;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.link-tip-section .el-tag i {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 链接卡片输入框优化 */
|
|
|
+.link-card ::v-deep .el-input__inner,
|
|
|
+.link-card ::v-deep .el-textarea__inner {
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.link-card ::v-deep .el-form-item__label {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+/* 图片上传组件增强 */
|
|
|
+.image-card ::v-deep .el-upload {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 2px dashed #d9d9d9;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card ::v-deep .el-upload:hover {
|
|
|
+ border-color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card ::v-deep .el-upload-list__item {
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.image-card ::v-deep .el-upload-list__item:hover {
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 消息类别和课程选择优化 ===== */
|
|
|
+.msg-category-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.msg-category-item ::v-deep .el-form-item__label {
|
|
|
+ font-weight: 500;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.msg-category-item ::v-deep .el-form-item__content {
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.msg-category-item ::v-deep .el-radio-group {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px 20px;
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.msg-category-item ::v-deep .el-radio {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 课程选择区域 */
|
|
|
+.course-select-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.course-select-item ::v-deep .el-form-item__label {
|
|
|
+ font-weight: 500;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.course-select-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.course-select-row .el-select {
|
|
|
+ min-width: 160px;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.course-type-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.course-type-row .el-select {
|
|
|
+ width: 180px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<script>
|
|
|
+import draggable from 'vuedraggable';
|
|
|
+import {
|
|
|
+ listSopTemp,
|
|
|
+ getSopTemp,
|
|
|
+ delSopTemp,
|
|
|
+ addSopTemp,
|
|
|
+ sortDay,
|
|
|
+ dayListFun,
|
|
|
+ updateSopTemp,
|
|
|
+ exportSopTemp,
|
|
|
+ addOrUpdateSetting,
|
|
|
+ getSelectableRange,
|
|
|
+ selectRulesInfo,
|
|
|
+ delRules
|
|
|
+} from "@/api/qw/sopTemp";
|
|
|
+import {courseList, videoList} from "@/api/qw/sop";
|
|
|
+import {listToLiveNoEnd} from "@/api/live/live";
|
|
|
+import ImageUpload from "@/views/qw/sop/ImageUpload";
|
|
|
+import userVideo from "@/views/qw/userVideo/userVideo.vue";
|
|
|
+import {listReward} from "@/api/qw/luckyBag";
|
|
|
+import { getSmsTempList } from "@/api/company/companySmsTemp";
|
|
|
+import {
|
|
|
+ getRoles,
|
|
|
+} from "@/api/qw/sop";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "updateSopTemp",
|
|
|
+ components: {ImageUpload, userVideo, draggable},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryParams1: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ dataStatus: '1',
|
|
|
+ name: null,
|
|
|
+ type: null
|
|
|
+ },
|
|
|
+ luckyBagList: [],
|
|
|
+ projectFrom:process.env.VUE_APP_PROJECT_FROM,
|
|
|
+ addTag: [{
|
|
|
+ addTag: [],
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ delTag: [],
|
|
|
+ delTagVisible: false,
|
|
|
+ delTagValue: ''
|
|
|
+ }],
|
|
|
+ uploadUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS2",
|
|
|
+ uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/common/uploadOSSByHOOKVoice",
|
|
|
+ //上传语音的遮罩层
|
|
|
+ voiceLoading: false,
|
|
|
+ openSort: false,
|
|
|
+ openSort2: false,
|
|
|
+ // 遮罩层
|
|
|
+ loading: false,
|
|
|
+ loading2: false,
|
|
|
+ loading3: false,
|
|
|
+ // 导出遮罩层
|
|
|
+ exportLoading: false,
|
|
|
+ roles: [],
|
|
|
+ // 选中数组
|
|
|
+ dayList: [],
|
|
|
+ ruleList: [],
|
|
|
+ ids: [],
|
|
|
+ // startTimeRange: [],
|
|
|
+ courseTypeList: ['1','2', '4','5','6', '7','8','9','10','14','15','16','11'],
|
|
|
+ sysFsSopWatchStatus: [],
|
|
|
+ //消息内容类型 企微版
|
|
|
+ sysQwSopContentType: [],
|
|
|
+ //插件版
|
|
|
+ sysQwSopAiContentType: [],
|
|
|
+
|
|
|
+ //类别
|
|
|
+ sysQwSopSettingType: [],
|
|
|
+ smsTemplateList: [],
|
|
|
+
|
|
|
+ courseList: [],
|
|
|
+ videoList: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ defaultContentType: 1,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ id: "",
|
|
|
+ total: 0,
|
|
|
+ tabIndex: null,
|
|
|
+ // sop模板表格数据
|
|
|
+ setting: [],
|
|
|
+ data: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 状态字典
|
|
|
+ statusOptions: [],
|
|
|
+ videoNumOptions: {
|
|
|
+ title: '选择视频号',
|
|
|
+ open: false,
|
|
|
+ content: null,
|
|
|
+ contentIndex: null,
|
|
|
+ setIndex: null,
|
|
|
+ },
|
|
|
+ //1 修改 2 复制 3 查看
|
|
|
+ formType: null,
|
|
|
+ // 查询参数
|
|
|
+ form: {
|
|
|
+ name: null,
|
|
|
+ setting: null,
|
|
|
+ status: "1",
|
|
|
+ sort: 1,
|
|
|
+ companyId: null,
|
|
|
+ gap: 1,
|
|
|
+ },
|
|
|
+ // 缓存对象用于存储预加载的数据
|
|
|
+ tabCache: {},
|
|
|
+ // 标记哪些tab已经被请求过
|
|
|
+ loadedTabs: new Set(),
|
|
|
+ // 标记正在加载的tab，避免重复请求
|
|
|
+ loadingTabs: new Set(),
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {required: true, message: '名称不能为空', trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ status: [
|
|
|
+ {required: true, message: '状态不能为空', trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ sort: [
|
|
|
+ {required: true, message: '排序不能为空', trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ gap: [
|
|
|
+ {required: true, message: '间隔天数不能为空', trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ liveList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ getRoles().then(res => {
|
|
|
+ this.roles = res.data;
|
|
|
+ })
|
|
|
+ this.getDicts("sys_qwSopAi_contentType").then(response => {
|
|
|
+ this.sysQwSopAiContentType = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("sys_fs_sop_watch_status").then(response => {
|
|
|
+ this.sysFsSopWatchStatus = response.data;
|
|
|
+ });
|
|
|
+ // getSelectableRange().then(e => {
|
|
|
+ // this.startTimeRange = e.data;
|
|
|
+ // })
|
|
|
+
|
|
|
+ this.getDicts("sys_qwSop_contentType").then(response => {
|
|
|
+ this.sysQwSopContentType = response.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.getDicts("sys_company_status").then(response => {
|
|
|
+ this.statusOptions = response.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.getDicts("sys_qwSop_settingType").then(response => {
|
|
|
+ this.sysQwSopSettingType = response.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ courseList().then(response => {
|
|
|
+ this.courseList = response.list;
|
|
|
+ });
|
|
|
+
|
|
|
+ listToLiveNoEnd().then(response => {
|
|
|
+ this.liveList = response.rows;
|
|
|
+ })
|
|
|
+ listReward(this.queryParams1).then(response => {
|
|
|
+ this.luckyBagList = response.rows;
|
|
|
+ });
|
|
|
+
|
|
|
+ const id = this.$route.params && this.$route.params.id;
|
|
|
+ this.id = id;
|
|
|
+ this.formType = this.$route.params && this.$route.params.type;
|
|
|
+ console.info(this.form)
|
|
|
+ this.handleUpdate(id);
|
|
|
+
|
|
|
+ this.loadSmsTemplates();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getLuckyBagStatus(content) {
|
|
|
+ const selectedLuckyBag = this.luckyBagList.find(item => item.id === content.luckyBagId);
|
|
|
+ if (selectedLuckyBag) {
|
|
|
+ content.luckyBagDataStatus = selectedLuckyBag.dataStatus; // 自动填充标题
|
|
|
+ } else {
|
|
|
+ // 若未找到对应直播间，清空标题和封面（可选）
|
|
|
+ content.luckyBagDataStatus = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取短信模板信息
|
|
|
+ getSmsTemplateInfo(content) {
|
|
|
+ // 如果短信模板列表为空，先加载数据
|
|
|
+ if (this.smsTemplateList.length === 0) {
|
|
|
+ getSmsTempList().then(response => {
|
|
|
+ this.smsTemplateList = response.rows || response.data || [];
|
|
|
+ // 加载完成后再次调用自身来处理选中项
|
|
|
+ this.processSelectedSmsTemplate(content);
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('加载短信模板失败:', error);
|
|
|
+ this.$message.error('加载短信模板失败');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 直接处理选中项
|
|
|
+ this.processSelectedSmsTemplate(content);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理选中的短信模板
|
|
|
+ processSelectedSmsTemplate(content) {
|
|
|
+ const selectedTemplate = this.smsTemplateList.find(item => item.tempId === content.smsTemplateId);
|
|
|
+ if (selectedTemplate) {
|
|
|
+ // 自动填充模板内容预览
|
|
|
+ this.$set(content, 'smsTemplateContent', selectedTemplate.content || selectedTemplate.templateContent || '');
|
|
|
+ } else {
|
|
|
+ // 清空相关内容
|
|
|
+ this.$set(content, 'smsTemplateContent', '');
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载短信模板列表
|
|
|
+ loadSmsTemplates() {
|
|
|
+ if (this.smsTemplateList.length > 0) {
|
|
|
+ return; // 如果已经有数据，不再重复加载
|
|
|
+ }
|
|
|
+
|
|
|
+ getSmsTempList().then(response => {
|
|
|
+ this.smsTemplateList = response.rows || response.data || [];
|
|
|
+ if (this.smsTemplateList.length === 0) {
|
|
|
+ this.$message.info('暂无可用的短信模板');
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('加载短信模板失败:', error);
|
|
|
+ this.$message.error('加载短信模板失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ liveChange(content) {
|
|
|
+ // content.liveId 是选中的直播间 ID（liveId）
|
|
|
+ const selectedLive = this.liveList.find(live => live.liveId === content.liveId);
|
|
|
+ if (selectedLive) {
|
|
|
+ // 从选中的直播间对象中提取标题和封面，赋值给当前内容的对应字段
|
|
|
+ // 假设直播间对象中标题字段为 liveTitle，封面字段为 coverImg（根据实际接口字段调整）
|
|
|
+ content.miniprogramTitle = selectedLive.liveName || ''; // 自动填充标题
|
|
|
+ content.miniprogramPicUrl = selectedLive.liveImgUrl || ''; // 自动填充封面
|
|
|
+ } else {
|
|
|
+ // 若未找到对应直播间，清空标题和封面（可选）
|
|
|
+ content.miniprogramTitle = '';
|
|
|
+ content.miniprogramPicUrl = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ liveChangeContent(e){
|
|
|
+ //循环修改当前content下面的直播间内容
|
|
|
+ //并且禁用直播间编辑
|
|
|
+ if(!!e && !!e.setting){
|
|
|
+ for(let i=0;i<e.setting.length;i++){
|
|
|
+ if(!!e.liveId){
|
|
|
+ this.$set(e.setting[i], 'liveId', e.liveId);
|
|
|
+ this.liveChange(e.setting[i]);
|
|
|
+ }
|
|
|
+ //直播间变为不可编辑
|
|
|
+ this.$set(e.setting[i], 'setListDisabled', true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose(index, tag, content) {
|
|
|
+ content.addTag.splice(content.addTag.indexOf(tag), 1);
|
|
|
+ },
|
|
|
+ showInput(index) {
|
|
|
+ this.addTag[index].inputVisible = true;
|
|
|
+ },
|
|
|
+ handleInputConfirm(index, content) {
|
|
|
+ let inputValue = this.addTag[index].inputValue;
|
|
|
+ if (inputValue) {
|
|
|
+ if (!content.hasOwnProperty('addTag')) {
|
|
|
+ this.$set(content, 'addTag', []);
|
|
|
+ }
|
|
|
+ content.addTag.push(inputValue);
|
|
|
+ }
|
|
|
+ this.addTag[index].inputVisible = false;
|
|
|
+ this.addTag[index].inputValue = '';
|
|
|
+ },
|
|
|
+
|
|
|
+ // 检查字节长度
|
|
|
+ checkByteLength(content, type, isOfficial) {
|
|
|
+
|
|
|
+ if (type == 4 && isOfficial == '1')
|
|
|
+ for (let i = 0; i < content.setting.length; i++) {
|
|
|
+ const text = content.setting[i].miniprogramTitle;
|
|
|
+ const byteLength = this.getByteLength(text); // 获取当前字节数
|
|
|
+ // 如果字节数超过64，截断输入内容
|
|
|
+ if (byteLength > 64) {
|
|
|
+ this.$set(content.setting[i], 'miniprogramTitle', this.truncateTextByByteLength(text, 60));
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 计算字符串的字节数
|
|
|
+ getByteLength(text) {
|
|
|
+ return new Blob([text]).size; // 使用 Blob 计算字节数
|
|
|
+ },
|
|
|
+
|
|
|
+ // 根据字节数截断字符串
|
|
|
+ truncateTextByByteLength(text, maxByteLength) {
|
|
|
+ let byteLength = 0;
|
|
|
+ let result = "";
|
|
|
+
|
|
|
+ for (let i = 0; i < text.length; i++) {
|
|
|
+ const char = text[i];
|
|
|
+ const charByteLength = this.getByteLength(char); // 获取当前字符的字节数
|
|
|
+
|
|
|
+ // 如果加上当前字符的字节数后不超过限制，则添加到结果中
|
|
|
+ if (byteLength + charByteLength <= maxByteLength) {
|
|
|
+ result += char;
|
|
|
+ byteLength += charByteLength;
|
|
|
+ } else {
|
|
|
+ break; // 超过限制时停止
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCloseDel(index, tag, content) {
|
|
|
+ content.delTag.splice(content.delTag.indexOf(tag), 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ showInputDel(index) {
|
|
|
+ this.addTag[index].delTagVisible = true;
|
|
|
+ },
|
|
|
+ handleInputConfirmDel(index, content) {
|
|
|
+
|
|
|
+ let delTagValue = this.addTag[index].delTagValue;
|
|
|
+
|
|
|
+ if (delTagValue) {
|
|
|
+ if (!content.hasOwnProperty('delTag')) {
|
|
|
+ this.$set(content, 'delTag', []);
|
|
|
+ }
|
|
|
+ content.delTag.push(delTagValue);
|
|
|
+
|
|
|
+ }
|
|
|
+ this.addTag[index].delTagVisible = false;
|
|
|
+ this.addTag[index].delTagValue = '';
|
|
|
+ },
|
|
|
+ saveSorts() {
|
|
|
+ let list = this.dayList.filter(e => e.dayNum != e.newDay).map(e => {
|
|
|
+ return {dayNum: e.newDay, id: e.id}
|
|
|
+ })
|
|
|
+ this.loading3 = true;
|
|
|
+ sortDay(list).then(e => {
|
|
|
+ window.location.reload();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ saveSortsRules() {
|
|
|
+ this.$set(this.setting[this.tabIndex], 'content', this.ruleList);
|
|
|
+ this.openSort2 = false;
|
|
|
+ },
|
|
|
+ autoSortsRules() {
|
|
|
+ this.ruleList = this.ruleList.sort((a, b) => {
|
|
|
+ // 将 time 字段转换为 Date 对象进行比较
|
|
|
+ const timeA = new Date(`1970-01-01T${a.time}Z`);
|
|
|
+ const timeB = new Date(`1970-01-01T${b.time}Z`);
|
|
|
+
|
|
|
+ // 比较时间顺序
|
|
|
+ return timeA - timeB; // 升序排序
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openUpdateDaySorts() {
|
|
|
+ dayListFun(this.id).then(response => {
|
|
|
+ response.data.forEach((item) => item.newDay = item.dayNum);
|
|
|
+ this.dayList = response.data;
|
|
|
+ if (this.dayList == null || this.dayList.length == 0) {
|
|
|
+ this.$message.error("暂无天数")
|
|
|
+ } else {
|
|
|
+ this.openSort = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openUpdateSorts() {
|
|
|
+ this.ruleList = JSON.parse(JSON.stringify(this.setting[this.tabIndex].content));
|
|
|
+ if (this.ruleList == null || this.ruleList.length == 0) {
|
|
|
+ this.$message.error("暂无规则")
|
|
|
+ } else {
|
|
|
+ this.openSort2 = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onDragEndDay() {
|
|
|
+ this.dayList.forEach((item, index) => {
|
|
|
+ item.newDay = (this.form.gap * index) + 1;
|
|
|
+ })
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ onDragEnd() {
|
|
|
+ // 更新排序值
|
|
|
+ // this.setting[this.tabIndex].content.forEach((item, index) => {
|
|
|
+ // item.sorts = index;
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ // 切换标签保存数据
|
|
|
+ async leave(index, oldIndex) {
|
|
|
+ const newData = this.setting[index]
|
|
|
+ if (newData.dayNum && newData.id) {
|
|
|
+ // 检查是否已经有缓存数据
|
|
|
+ if (this.tabCache[newData.id]) {
|
|
|
+ // 使用缓存数据，无需loading
|
|
|
+ this.applyCachedData(index, newData);
|
|
|
+ } else {
|
|
|
+ // 没有缓存，需要请求数据
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ const res = await selectRulesInfo(newData.id);
|
|
|
+ // 缓存数据
|
|
|
+ this.tabCache[newData.id] = res.data;
|
|
|
+ this.loadedTabs.add(index);
|
|
|
+ this.applyDataToTab(index, newData, res.data);
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取规则信息失败:", error);
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 预加载下一个tab的数据
|
|
|
+ this.preloadNextTab(index);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 应用缓存数据到tab
|
|
|
+ applyCachedData(index, newData) {
|
|
|
+ const cachedData = this.tabCache[newData.id];
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.videoList = [];
|
|
|
+ this.addTag = [];
|
|
|
+ this.$set(this.setting, index, {
|
|
|
+ ...newData,
|
|
|
+ voice: cachedData.voice,
|
|
|
+ content: cachedData.list || [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: ""}]}]
|
|
|
+ });
|
|
|
+
|
|
|
+ for (let j = 0; j < this.setting[index].content.length; j++) {
|
|
|
+ if (this.setting[index].content[j].addTag != null) {
|
|
|
+ this.setting[index].content[j].addTag = JSON.parse(this.setting[index].content[j].addTag)
|
|
|
+ }
|
|
|
+ if (this.setting[index].content[j].delTag != null) {
|
|
|
+ this.setting[index].content[j].delTag = JSON.parse(this.setting[index].content[j].delTag)
|
|
|
+ }
|
|
|
+ this.videoList.push([])
|
|
|
+ this.addTag.push({
|
|
|
+ addTag: [],
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ delTag: [],
|
|
|
+ delTagVisible: false,
|
|
|
+ delTagValue: ''
|
|
|
+ })
|
|
|
+ if (this.setting[index].content[j].type == 2) {
|
|
|
+ if (this.setting[index].content[j].hasOwnProperty('courseId')) {
|
|
|
+ this.courseChange(this.setting[index].content[j], index, j);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 应用新获取的数据到tab
|
|
|
+ applyDataToTab(index, newData, data) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.videoList = [];
|
|
|
+ this.addTag = [];
|
|
|
+ this.$set(this.setting, index, {
|
|
|
+ ...newData,
|
|
|
+ voice: data.voice,
|
|
|
+ content: data.list || [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: ""}]}]
|
|
|
+ });
|
|
|
+
|
|
|
+ for (let j = 0; j < this.setting[index].content.length; j++) {
|
|
|
+ if (this.setting[index].content[j].addTag != null) {
|
|
|
+ this.setting[index].content[j].addTag = JSON.parse(this.setting[index].content[j].addTag)
|
|
|
+ }
|
|
|
+ if (this.setting[index].content[j].delTag != null) {
|
|
|
+ this.setting[index].content[j].delTag = JSON.parse(this.setting[index].content[j].delTag)
|
|
|
+ }
|
|
|
+ this.videoList.push([])
|
|
|
+ this.addTag.push({
|
|
|
+ addTag: [],
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ delTag: [],
|
|
|
+ delTagVisible: false,
|
|
|
+ delTagValue: ''
|
|
|
+ })
|
|
|
+ if (this.setting[index].content[j].type == 2) {
|
|
|
+ if (this.setting[index].content[j].hasOwnProperty('courseId')) {
|
|
|
+ this.courseChange(this.setting[index].content[j], index, j);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 预加载下一个tab的数据
|
|
|
+ async preloadNextTab(currentIndex) {
|
|
|
+ const nextIndex = parseInt(currentIndex) + 1;
|
|
|
+ // 检查是否有下一个tab
|
|
|
+ if (nextIndex >= this.setting.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const nextTabData = this.setting[nextIndex];
|
|
|
+ // 只预加载已存在的tab（有id的），跳过新建的tab
|
|
|
+ if (!nextTabData.id || !nextTabData.dayNum) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果已经加载过或正在加载，则跳过
|
|
|
+ if (this.loadedTabs.has(nextIndex) || this.loadingTabs.has(nextIndex) || this.tabCache[nextTabData.id]) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 标记为正在加载
|
|
|
+ this.loadingTabs.add(nextIndex);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await selectRulesInfo(nextTabData.id);
|
|
|
+ // 缓存数据
|
|
|
+ this.tabCache[nextTabData.id] = res.data;
|
|
|
+ this.loadedTabs.add(nextIndex);
|
|
|
+ } catch (error) {
|
|
|
+ console.error("预加载tab数据失败:", error);
|
|
|
+ } finally {
|
|
|
+ // 移除加载标记
|
|
|
+ this.loadingTabs.delete(nextIndex);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ save() {
|
|
|
+ let data = this.setting[this.tabIndex];
|
|
|
+ let check = this.checkData(data);
|
|
|
+ if (!check) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ for (let j = 0; j < data.content.length; j++) {
|
|
|
+
|
|
|
+ //如果不是每天第一条,全刷为非官方
|
|
|
+ if (j!==0){
|
|
|
+ data.content[j].isOfficial=0;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.content[j].type != 4 && data.content[j].type != 5) {
|
|
|
+ for (let k = 0; k < data.content[j].setting.length; k++) {
|
|
|
+ if (data.content[j].setting[k].contentType == 4 && (data.content[j].setting[k].miniprogramTitle != null || data.content[j].setting[k].miniprogramTitle != "")) {
|
|
|
+ data.content[j].setting[k].miniprogramTitle = this.truncateTextByByteLength(data.content[j].setting[k].miniprogramTitle, 60)
|
|
|
+ }
|
|
|
+ // 处理短信模板数据映射
|
|
|
+ if (data.content[j].setting[k].contentType == 21 && data.content[j].setting[k].smsTemplateId) {
|
|
|
+ // 根据选中的短信模板ID查找对应的模板信息
|
|
|
+ const selectedTemplate = this.smsTemplateList.find(template => template.tempId === data.content[j].setting[k].smsTemplateId);
|
|
|
+ if (selectedTemplate) {
|
|
|
+ // 设置短信模板的相关字段
|
|
|
+ this.$set(data.content[j].setting[k], 'smsTemplateCode', selectedTemplate.tempCode || '');
|
|
|
+ this.$set(data.content[j].setting[k], 'smsTemplateTitle', selectedTemplate.title || '');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let index = 0;
|
|
|
+ const dataList = data.content.map(e => {
|
|
|
+ e.name = data.name;
|
|
|
+ e.tempId = this.id;
|
|
|
+ e.sorts = Number(this.tabIndex);
|
|
|
+ e.dayNum = (this.form.gap * e.sorts) + 1;
|
|
|
+ e.sorts = index++;
|
|
|
+ data.dayNum = e.dayNum;
|
|
|
+ e.contentType = e.type;
|
|
|
+ e.settingList = e.setting;
|
|
|
+ e.settingList.forEach(e => e.content = JSON.stringify(e));
|
|
|
+ if (e.addTag != null) {
|
|
|
+ e.addTag = JSON.stringify(e.addTag);
|
|
|
+ }
|
|
|
+ if (e.delTag != null) {
|
|
|
+ e.delTag = JSON.stringify(e.delTag);
|
|
|
+ }
|
|
|
+ return e;
|
|
|
+ })
|
|
|
+ data.tempId = this.id;
|
|
|
+ data.list = dataList;
|
|
|
+ this.loading = true;
|
|
|
+ addOrUpdateSetting(data).then(e => {
|
|
|
+ this.$message.success(e.msg)
|
|
|
+ let content = this.setting[this.tabIndex].content;
|
|
|
+ for (let j = 0; j < content.length; j++) {
|
|
|
+ if (content[j].addTag != null) {
|
|
|
+ content[j].addTag = JSON.parse(content[j].addTag);
|
|
|
+ }
|
|
|
+ if (content[j].delTag != null) {
|
|
|
+ content[j].delTag = JSON.parse(content[j].delTag);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ // 使用Vue.set确保响应式更新
|
|
|
+ this.$set(this.setting, this.tabIndex, {
|
|
|
+ ...this.setting[this.tabIndex],
|
|
|
+ id: e.data.id,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新缓存中的数据
|
|
|
+ const currentTabId = this.setting[this.tabIndex].id;
|
|
|
+ if (currentTabId) {
|
|
|
+ // 重新获取最新数据并更新缓存
|
|
|
+ selectRulesInfo(currentTabId).then(res => {
|
|
|
+ this.tabCache[currentTabId] = res.data;
|
|
|
+ this.loadedTabs.add(parseInt(this.tabIndex));
|
|
|
+ }).catch(error => {
|
|
|
+ console.error("更新缓存失败:", error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkData(data) {
|
|
|
+ if (this.form.sendType != 4) {
|
|
|
+
|
|
|
+ for (let j = 0; j < data.content.length; j++) {
|
|
|
+ if (data.name == null || data.name == "") {
|
|
|
+ this.$message.error("内容名称不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].time == null || data.content[j].time == "") {
|
|
|
+ this.$message.error("时间不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.content[j].type == 20){
|
|
|
+ if (data.content[j].liveId == null || data.content[j].liveId == "") {
|
|
|
+ this.$message.error("请选择直播间")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.content[j].type == 2) {
|
|
|
+ if (data.content[j].courseId == null || data.content[j].courseId == "") {
|
|
|
+ this.$message.error("请选择课程")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].videoId == null || data.content[j].videoId == "") {
|
|
|
+ this.$message.error("请选择课节")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].courseType == null || data.content[j].courseType === "") {
|
|
|
+ this.$message.error("请选择消息类型")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.content[j].type != 4 && data.content[j].type != 5) {
|
|
|
+ for (let k = 0; k < data.content[j].setting.length; k++) {
|
|
|
+ if (data.content[j].setting[k].contentType == 1 && (data.content[j].setting[k].value == null || data.content[j].setting[k].value == "")) {
|
|
|
+ this.$message.error("内容不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].setting[k].contentType == 2 && (data.content[j].setting[k].imgUrl == null || data.content[j].setting[k].imgUrl == "")) {
|
|
|
+ this.$message.error("图片不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if ((data.content[j].setting[k].contentType == 3 || data.content[j].setting[k].contentType == 9 || data.content[j].setting[k].contentType == 10 || data.content[j].setting[k].contentType == 17|| data.content[j].setting[k].contentType == 23) && (data.content[j].setting[k].linkTitle == null || data.content[j].setting[k].linkTitle == "")) {
|
|
|
+ this.$message.error("链接标题不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if ((data.content[j].setting[k].contentType == 3 || data.content[j].setting[k].contentType == 9 || data.content[j].setting[k].contentType == 10|| data.content[j].setting[k].contentType == 17|| data.content[j].setting[k].contentType == 23) && (data.content[j].setting[k].linkDescribe == null || data.content[j].setting[k].linkDescribe == "")) {
|
|
|
+ this.$message.error("链接描述不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if ((data.content[j].setting[k].contentType == 3 || data.content[j].setting[k].contentType == 9 || data.content[j].setting[k].contentType == 10|| data.content[j].setting[k].contentType == 17|| data.content[j].setting[k].contentType == 23) && (data.content[j].setting[k].linkImageUrl == null || data.content[j].setting[k].linkImageUrl == "")) {
|
|
|
+ this.$message.error("链接图片不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].setting[k].contentType == 3 && data.content[j].setting[k].type == 1 && (data.content[j].setting[k].linkUrl == null || data.content[j].setting[k].linkUrl == "")) {
|
|
|
+ this.$message.error("链接地址不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if ((data.content[j].setting[k].contentType == 4 || data.content[j].setting[k].contentType == 10 || data.content[j].setting[k].contentType == 17 || data.content[j].setting[k].contentType == 23) && (data.content[j].setting[k].miniprogramTitle == null || data.content[j].setting[k].miniprogramTitle == "")) {
|
|
|
+ this.$message.error("小程序消息标题不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if ((data.content[j].setting[k].contentType == 4 || data.content[j].setting[k].contentType == 10 || data.content[j].setting[k].contentType == 17 || data.content[j].setting[k].contentType == 23) && data.content[j].isOfficial !== '1' && (data.content[j].setting[k].miniprogramPicUrl == null || data.content[j].setting[k].miniprogramPicUrl == "")) {
|
|
|
+ this.$message.error("小程序封面地址不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.content[j].setting[k].contentType == 10 && data.content[j].isOfficial !== '1' && (data.content[j].setting[k].miniprogramPage == null || data.content[j].setting[k].miniprogramPage == "")) {
|
|
|
+ this.$message.error("小程序page地址不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.content[j].setting[k].contentType == 5 && (data.content[j].setting[k].fileUrl == null || data.content[j].setting[k].fileUrl == "")) {
|
|
|
+ this.$message.error("文件不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].setting[k].contentType == 6 && (data.content[j].setting[k].videoUrl == null || data.content[j].setting[k].videoUrl == "")) {
|
|
|
+ this.$message.error("视频不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].setting[k].contentType == 7 && (data.content[j].setting[k].value == null || data.content[j].setting[k].value == "")) {
|
|
|
+ this.$message.error("语音文本不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].setting[k].contentType == 8 && (data.content[j].setting[k].url == null || data.content[j].setting[k].url == "")) {
|
|
|
+ this.$message.error("视频号信息不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (data.content[j].setting[k].contentType == 21 && (data.content[j].setting[k].smsTemplateId == null || data.content[j].setting[k].smsTemplateId == "")) {
|
|
|
+ this.$message.error("短信模板不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (data.content[j].type == 4) {
|
|
|
+ if (data.content[j].aiTouch == null || data.content[j].aiTouch == '') {
|
|
|
+ this.$message.error("AI触达不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (let day of this.setting) {
|
|
|
+ for (let content of day.content) {
|
|
|
+ for (let set of content.setting) {
|
|
|
+ // if (!set.intervalTime) {
|
|
|
+ // this.$message.error("客服时间不能为空");
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // 第一天校验intervalTime，第二天及以后校验time
|
|
|
+ if (day.dayNum == 1) {
|
|
|
+ if (!set.intervalTime) {
|
|
|
+ this.$message.error("客服时间不能为空");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!set.time) {
|
|
|
+ this.$message.error("触发时间不能为空");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 校验发送用户类型
|
|
|
+ if (!set.onlyUnregistered) {
|
|
|
+ this.$message.error("发送用户类型不能为空");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (set.contentType == 1 && (set.value == null || set.value == "")) {
|
|
|
+ this.$message.error("内容不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (set.contentType == 2 && (set.imgUrl == null || set.imgUrl == "")) {
|
|
|
+ this.$message.error("图片不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if ((set.contentType == 3 || set.contentType == 9) && (set.linkTitle == null || set.linkTitle == "")) {
|
|
|
+ this.$message.error("链接标题不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if ((set.contentType == 3 || set.contentType == 9) && (set.linkDescribe == null || set.linkDescribe == "")) {
|
|
|
+ this.$message.error("链接描述不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if ((set.contentType == 3 || set.contentType == 9) && (set.linkImageUrl == null || set.linkImageUrl == "")) {
|
|
|
+ this.$message.error("链接图片不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (set.contentType == 3 && set.type == 1 && (set.linkUrl == null || set.linkUrl == "")) {
|
|
|
+ this.$message.error("链接地址不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (set.contentType == 4 && (set.miniprogramTitle == null || set.miniprogramTitle == "")) {
|
|
|
+ this.$message.error("小程序消息标题不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (set.contentType == 4 && (set.miniprogramPicUrl == null || set.miniprogramPicUrl == "")) {
|
|
|
+ this.$message.error("小程序封面地址不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (set.contentType == 5 && (set.fileUrl == null || set.fileUrl == "")) {
|
|
|
+ this.$message.error("文件不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (set.contentType == 6 && (set.videoUrl == null || set.videoUrl == "")) {
|
|
|
+ this.$message.error("视频不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (set.contentType == 7 && (set.value == null || set.value == "")) {
|
|
|
+ this.$message.error("语音文本不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (set.contentType == 8 && (set.url == null || set.url == "")) {
|
|
|
+ this.$message.error("视频号信息不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (set.contentType == 21 && (set.smsTemplateId == null || set.smsTemplateId == "")) {
|
|
|
+ this.$message.error("短信模板不能为空")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ tabClick(obj) {
|
|
|
+
|
|
|
+ },
|
|
|
+ addSetList(contentIndex, content) {
|
|
|
+ if (this.form.sendType == 1) {
|
|
|
+ for (let i = 0; i < content.length; i++) {
|
|
|
+ if (!content[i].setting) {
|
|
|
+ content[i].setting = []; // 初始化 setting 数组如果不存在
|
|
|
+ }
|
|
|
+
|
|
|
+ if (content[i].setting.length > 9) {
|
|
|
+ return this.$message.error("因为企微接口限制，企微模板一条消息只能设置最多~9个内容！！")
|
|
|
+ } else {
|
|
|
+
|
|
|
+ // 动态生成新的设置项
|
|
|
+ const newSetting = content[i].setting.some(item => item.contentType === '1')
|
|
|
+ ? {contentType: '2', imgUrl: ''} // 如果存在 contentType = '1'，添加 contentType = '2'
|
|
|
+ : {contentType: '1', value: ''}; // 如果不存在 contentType = '1'，添加 contentType = '1'
|
|
|
+
|
|
|
+ // 将新设置项添加到 content[i].setting 数组中
|
|
|
+ content[i].setting.push(newSetting);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!content[contentIndex].setting) {
|
|
|
+ content[contentIndex].setting = []; // 初始化 setting 数组如果不存在
|
|
|
+ }
|
|
|
+
|
|
|
+ const newSetting = {
|
|
|
+ contentType: '1',
|
|
|
+ value: '',
|
|
|
+ onlyUnregistered: '3',
|
|
|
+ };
|
|
|
+ if (this.form.sendType === 4) {
|
|
|
+ for (let i = 0; i < content.length; i++) {
|
|
|
+ if (content[i].setting.length < 5) {
|
|
|
+ // 将新设置项添加到 content.setting 数组中
|
|
|
+ content[contentIndex].setting.push(newSetting);
|
|
|
+ } else {
|
|
|
+ return this.$message.error("因为要求限制，新课对话模板一条消息只能设置最多~5个内容！！")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 将新设置项添加到 content.setting 数组中
|
|
|
+ content[contentIndex].setting.push(newSetting);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ delSetList(index, contentIndex, setIndex) {
|
|
|
+ this.setting[index].content[contentIndex].setting.splice(setIndex, 1)
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ addContent(index) {
|
|
|
+ if (this.setting[index].content.length > 0 && this.form.sendType == 1) {
|
|
|
+ return this.$message.error("因为企微接口限制，企微模板一天只能设置一条消息~")
|
|
|
+ } else {
|
|
|
+ const sourceContent = this.setting[index].content[0];
|
|
|
+ const newContent = {
|
|
|
+ type: this.defaultContentType,
|
|
|
+ contentType: 1,
|
|
|
+ setting: [{contentType: '1', value: ""}],
|
|
|
+ // 复制课程相关字段，如 courseId、videoId，根据实际数据结构补充
|
|
|
+ courseId: sourceContent.courseId,
|
|
|
+ videoId: sourceContent.videoId,
|
|
|
+ courseType: sourceContent.courseType,
|
|
|
+ isAtAll: '0',
|
|
|
+ };
|
|
|
+ this.setting[index].content.push(newContent);
|
|
|
+ this.videoList.push([]);
|
|
|
+ this.addTag.push({
|
|
|
+ addTag: [],
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ delTag: [],
|
|
|
+ delTagVisible: false,
|
|
|
+ delTagValue: ''
|
|
|
+ });
|
|
|
+ // 如果有视频列表关联，也可同步处理 videoList，根据 courseId 重新请求或复制已有视频数据
|
|
|
+ if (sourceContent.courseId) {
|
|
|
+ this.courseUpdate(newContent, index, this.setting[index].content.length - 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ delContent(index, contentIndex) {
|
|
|
+ this.setting[index].content.splice(contentIndex, 1)
|
|
|
+ this.videoList.splice(contentIndex, 1)
|
|
|
+ this.addTag.splice(contentIndex, 1)
|
|
|
+ },
|
|
|
+ addSetting() {
|
|
|
+ let content = [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: "",}],isAtAll: '0'}];
|
|
|
+ if (this.form.sendType == 4) {
|
|
|
+ content = [{type: 2, contentType: '1', setting: [{contentType: '1', value: "", onlyUnregistered: '3'}]}];
|
|
|
+ content[0].setting[0].intervalTime = 5;
|
|
|
+ }
|
|
|
+ this.setting.push({
|
|
|
+ name: null,
|
|
|
+ dayNum: (this.form.gap * this.setting.length) + 1,
|
|
|
+ content
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ delSetting(index) {
|
|
|
+ const newData = this.setting[index]
|
|
|
+ if (newData.id && newData.dayNum) {
|
|
|
+ this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ delRules(newData.id, newData.name, newData.dayNum).then(res => {
|
|
|
+ this.del(index);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.del(index);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ del(index) {
|
|
|
+ if (index == 0) {
|
|
|
+ this.tabIndex = "0";
|
|
|
+ } else {
|
|
|
+ this.tabIndex = (index - 1) + "";
|
|
|
+ }
|
|
|
+ this.setting.splice(index, 1)
|
|
|
+
|
|
|
+ },
|
|
|
+ handleClosegroupUser(list) {
|
|
|
+ const index = this.userSelectList.findIndex(t => t === list);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.userSelectList.splice(index, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //选择视频号
|
|
|
+ hanldeSelectVideoNum(content, index, contentIndex, setIndex) {
|
|
|
+ this.videoNumOptions.content = content;
|
|
|
+ this.videoNumOptions.contentIndex = contentIndex;
|
|
|
+ this.videoNumOptions.setIndex = setIndex;
|
|
|
+ this.videoNumOptions.open = true;
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ qwUserVideoResult(val) {
|
|
|
+
|
|
|
+ // 根据选中的内容，将返回的数据更新到相应的表单项
|
|
|
+ const content = this.videoNumOptions.content;
|
|
|
+ const setList = content.setting[this.videoNumOptions.setIndex];
|
|
|
+
|
|
|
+ setList.nickname = val.nickname;
|
|
|
+ setList.avatar = val.avatar;
|
|
|
+ setList.coverUrl = val.coverUrl;
|
|
|
+ setList.thumbUrl = val.thumbUrl;
|
|
|
+ setList.desc = val.desc;
|
|
|
+ setList.url = val.url;
|
|
|
+ setList.extras = val.extras;
|
|
|
+ setList.videoId = val.id;
|
|
|
+
|
|
|
+ this.videoNumOptions.open = false;
|
|
|
+
|
|
|
+ },
|
|
|
+ //首次刷新
|
|
|
+ courseChange(content, index, countIndex) {
|
|
|
+
|
|
|
+ this.courseUpdate(content, index, countIndex);
|
|
|
+ },
|
|
|
+
|
|
|
+ //修改
|
|
|
+ courseChangeUpdate(content, index, countIndex) {
|
|
|
+
|
|
|
+ this.$set(content, 'videoId', null);
|
|
|
+ // 查找选中的课程对应的 label
|
|
|
+ const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === content.courseId);
|
|
|
+ for (let i = 0; i < content.setting.length; i++) {
|
|
|
+
|
|
|
+
|
|
|
+ this.$set(content.setting[i], 'linkTitle', null);
|
|
|
+ this.$set(content.setting[i], 'linkDescribe', null);
|
|
|
+ this.$set(content.setting[i], 'linkImageUrl', null);
|
|
|
+
|
|
|
+
|
|
|
+ //如果是链接的才上
|
|
|
+ if (selectedCourse && content.type == 2 && content.courseId != null) {
|
|
|
+ //响应式直接给链接的标题/封面上值
|
|
|
+
|
|
|
+ if (content.setting[i].contentType == 3 || content.setting[i].contentType == 9) {
|
|
|
+ this.$set(content.setting[i], 'linkTitle', selectedCourse.dictLabel);
|
|
|
+ this.$set(content.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
|
|
|
+ }
|
|
|
+ if (content.setting[i].contentType == 4 || content.setting[i].contentType == 10 || content.setting[i].contentType == 17 || content.setting[i].contentType == 23) {
|
|
|
+ this.$set(content.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.courseUpdate(content, index, countIndex);
|
|
|
+ },
|
|
|
+ handleInputVideoText(value, content) {
|
|
|
+ // 允许的字符：中文、英文（大小写）、数字和指定标点符号（，。！？）
|
|
|
+ const regex = /^[\u4e00-\u9fa5，。！？,!?]+$/;
|
|
|
+
|
|
|
+ // 删除不符合条件的字符
|
|
|
+ const filteredValue = value.split('').filter(char => regex.test(char)).join('');
|
|
|
+
|
|
|
+ this.$set(content, 'value', filteredValue);
|
|
|
+
|
|
|
+ },
|
|
|
+ courseUpdate(content, index, countIndex) {
|
|
|
+ videoList(content.courseId).then(response => {
|
|
|
+ // this.$set(this.videoList, countIndex, response.list); // 响应式设置videoList
|
|
|
+ this.videoList.splice(countIndex, 1, response.list);
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ toggleSalesCall(itemIndex, contentIndex, setIndex) {
|
|
|
+ // 获取目标对象
|
|
|
+ const setItem = this.setting[itemIndex].content[contentIndex].setting[setIndex];
|
|
|
+ const salesCall = '#销售称呼#';
|
|
|
+ const refKey = `textarea-${itemIndex}-${contentIndex}-${setIndex}`;
|
|
|
+ const textarea = this.$refs[refKey][0]?.$refs?.textarea;
|
|
|
+
|
|
|
+ if (!textarea) return;
|
|
|
+
|
|
|
+ // 获取光标位置
|
|
|
+ const cursorPosition = textarea.selectionStart;
|
|
|
+
|
|
|
+ if (setItem.isSalesCallAdded) {
|
|
|
+ // 移除所有标签
|
|
|
+ setItem.value = setItem.value.replace(new RegExp(salesCall, 'g'), '');
|
|
|
+ } else {
|
|
|
+ // 插入到光标位置
|
|
|
+ setItem.value =
|
|
|
+ setItem.value.slice(0, cursorPosition) +
|
|
|
+ salesCall +
|
|
|
+ setItem.value.slice(cursorPosition);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换状态
|
|
|
+ setItem.isSalesCallAdded = !setItem.isSalesCallAdded;
|
|
|
+
|
|
|
+ // 保持光标位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const newCursorPos = cursorPosition + (setItem.isSalesCallAdded ? salesCall.length : 0);
|
|
|
+ textarea.setSelectionRange(newCursorPos, newCursorPos);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toggleUserNameCall(itemIndex, contentIndex, setIndex) {
|
|
|
+ // 获取目标对象
|
|
|
+ const setItem = this.setting[itemIndex].content[contentIndex].setting[setIndex];
|
|
|
+ const salesCall = '#客户称呼#';
|
|
|
+ const refKey = `textarea-${itemIndex}-${contentIndex}-${setIndex}`;
|
|
|
+ const textarea = this.$refs[refKey][0]?.$refs?.textarea;
|
|
|
+
|
|
|
+ if (!textarea) return;
|
|
|
+
|
|
|
+ // 获取光标位置
|
|
|
+ const cursorPosition = textarea.selectionStart;
|
|
|
+
|
|
|
+ if (setItem.isUserNameCallAdded) {
|
|
|
+ // 移除所有标签
|
|
|
+ setItem.value = setItem.value.replace(new RegExp(salesCall, 'g'), '');
|
|
|
+ } else {
|
|
|
+ // 插入到光标位置
|
|
|
+ setItem.value =
|
|
|
+ setItem.value.slice(0, cursorPosition) +
|
|
|
+ salesCall +
|
|
|
+ setItem.value.slice(cursorPosition);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换状态
|
|
|
+ setItem.isUserNameCallAdded = !setItem.isUserNameCallAdded;
|
|
|
+
|
|
|
+ // 保持光标位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const newCursorPos = cursorPosition + (setItem.isUserNameCallAdded ? salesCall.length : 0);
|
|
|
+ textarea.setSelectionRange(newCursorPos, newCursorPos);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleKeydown(event, itemIndex, contentIndex, setIndex) {
|
|
|
+
|
|
|
+ const setItem = this.setting[itemIndex].content[contentIndex].setting[setIndex];
|
|
|
+ const refKey = `textarea-${itemIndex}-${contentIndex}-${setIndex}`;
|
|
|
+ const textarea = this.$refs[refKey][0]?.$refs?.textarea;
|
|
|
+
|
|
|
+ if (!textarea) return;
|
|
|
+
|
|
|
+ const tags = ['#销售称呼#', '#客户称呼#'];
|
|
|
+ const key = event.key;
|
|
|
+ const value = setItem.value;
|
|
|
+ const cursorPosition = textarea.selectionStart;
|
|
|
+
|
|
|
+ if (key === 'Backspace' || key === 'Delete') {
|
|
|
+ tags.forEach(tag => {
|
|
|
+ let start, end;
|
|
|
+
|
|
|
+ // Backspace 处理
|
|
|
+ if (key === 'Backspace' && cursorPosition >= tag.length) {
|
|
|
+ start = cursorPosition - tag.length;
|
|
|
+ if (value.slice(start, cursorPosition) === tag) {
|
|
|
+ event.preventDefault();
|
|
|
+ setItem.value = value.slice(0, start) + value.slice(cursorPosition);
|
|
|
+ if (tag === '#销售称呼#') setItem.isSalesCallAdded = false;
|
|
|
+ this.$nextTick(() => textarea.setSelectionRange(start, start));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Delete 处理
|
|
|
+ if (key === 'Delete') {
|
|
|
+ end = cursorPosition + tag.length;
|
|
|
+ if (value.slice(cursorPosition, end) === tag) {
|
|
|
+ event.preventDefault();
|
|
|
+ setItem.value = value.slice(0, cursorPosition) + value.slice(end);
|
|
|
+ if (tag === '#销售称呼#') setItem.isSalesCallAdded = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleContentTypeChange(content, index, countIndex, setIndex, item, fieldName, val) {
|
|
|
+
|
|
|
+ //消息类别是直播间&&选择了发送直播间
|
|
|
+
|
|
|
+ if(content.type == 20 && val == 12){
|
|
|
+ //如果选择了直播间 直接赋值
|
|
|
+ if(!!content.liveId){
|
|
|
+ this.$set(content.setting[setIndex], 'liveId', content.liveId);
|
|
|
+ this.liveChange(content.setting[setIndex]);
|
|
|
+ }
|
|
|
+ //直播间变为不可编辑
|
|
|
+ this.$set(content.setting[setIndex], 'setListDisabled', true);
|
|
|
+ }else{
|
|
|
+ //取消禁用
|
|
|
+ for (let i = 0; i < content.setting.length; i++) {
|
|
|
+ this.$set(content.setting[i], 'setListDisabled', true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //如果是链接的才上
|
|
|
+ if (content.courseId != null && content.type == 2) {
|
|
|
+ const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === content.courseId);
|
|
|
+
|
|
|
+ for (let i = 0; i < content.setting.length; i++) {
|
|
|
+ //响应式直接给链接的标题/封面上值
|
|
|
+ if (selectedCourse && content.type == 2 && content.courseId != null) {
|
|
|
+ if (content.setting[i].contentType == 3 || content.setting[i].contentType == 9) {
|
|
|
+ this.$set(content.setting[i], 'linkTitle', selectedCourse.dictLabel);
|
|
|
+ this.$set(content.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
|
|
|
+ }
|
|
|
+ if ((content.setting[i].contentType == 4 || content.setting[i].contentType == 10 || content.setting[i].contentType == 17 || content.setting[i].contentType == 23) && (content.isOfficial == '0' || content.isOfficial == null)) {
|
|
|
+ this.$set(content.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if (content.videoId != null && content.type == 2) {
|
|
|
+ // 查找选中的课节对应的 label
|
|
|
+ const selectedVideo = this.videoList[countIndex].find(course => parseInt(course.dictValue) === content.videoId);
|
|
|
+
|
|
|
+ for (let i = 0; i < content.setting.length; i++) {
|
|
|
+ //响应式直接给链接的描述上值
|
|
|
+ if (selectedVideo && content.type == 2 && content.videoId != null) {
|
|
|
+
|
|
|
+ if (content.setting[i].contentType == 3 || content.setting[i].contentType == 9) {
|
|
|
+ this.$set(content.setting[i], 'linkDescribe', selectedVideo.dictLabel);
|
|
|
+
|
|
|
+ if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
|
|
|
+ this.$set(content.setting[i], 'linkImageUrl', selectedVideo.dictImgUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if (content.setting[i].contentType == 4 || content.setting[i].contentType == 10 || content.setting[i].contentType == 17 || content.setting[i].contentType == 23) {
|
|
|
+ this.$set(content.setting[i], 'miniprogramTitle', this.truncateTextByByteLength(selectedVideo.dictLabel, 60));
|
|
|
+
|
|
|
+ if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
|
|
|
+ this.$set(content.setting[i], 'miniprogramPicUrl', selectedVideo.dictImgUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(countIndex == 0 && setIndex == 0){
|
|
|
+ this.updateAll(setIndex, item, fieldName, val);
|
|
|
+ for (let index in item.content) {
|
|
|
+ if(index != 0){
|
|
|
+ this.handleContentTypeChange(item.content[index], 0, index, 0, item, fieldName, val);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ videoIdChange(content, index, countIndex) {
|
|
|
+
|
|
|
+ //选择了课程小节则 默认绑上
|
|
|
+ let selectedVideo;
|
|
|
+ // 查找选中的课程对应的 label
|
|
|
+ if (content.videoId != null) {
|
|
|
+ selectedVideo = this.videoList[countIndex].find(course => parseInt(course.dictValue) === content.videoId);
|
|
|
+ }
|
|
|
+ for (let i = 0; i < content.setting.length; i++) {
|
|
|
+ //课程消息-文本内容
|
|
|
+ if (content.setting[i].contentType == 1 && content.type == 2) {
|
|
|
+ this.$set(content.setting[i], 'isBindUrl', '2');
|
|
|
+ }
|
|
|
+ //如果是链接的才上
|
|
|
+ if (selectedVideo && content.type == 2 && content.videoId != null) {
|
|
|
+
|
|
|
+ if (content.setting[i].contentType == 3 || content.setting[i].contentType == 9) {
|
|
|
+ this.$set(content.setting[i], 'linkDescribe', selectedVideo.dictLabel);
|
|
|
+
|
|
|
+ if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
|
|
|
+ this.$set(content.setting[i], 'linkImageUrl', selectedVideo.dictImgUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (content.setting[i].contentType == 4 || content.setting[i].contentType == 10 || content.setting[i].contentType == 17 || content.setting[i].contentType == 23 ) {
|
|
|
+ this.$set(content.setting[i], 'miniprogramTitle', this.truncateTextByByteLength(selectedVideo.dictLabel, 60));
|
|
|
+
|
|
|
+ if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
|
|
|
+ this.$set(content.setting[i], 'miniprogramPicUrl', selectedVideo.dictImgUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //上传文件
|
|
|
+ handleAvatarSuccessFile(res, file, content) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ // 使用 $set 确保响应式更新
|
|
|
+ this.$set(content, '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, content) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ // 使用 $set 确保响应式更新
|
|
|
+ this.$set(content, '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;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleAvatarSuccessVoice(res, file, content) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ // 创建 Audio 对象加载音频
|
|
|
+ const audio = new Audio(res.mp3Url);
|
|
|
+ audio.addEventListener('loadedmetadata', () => {
|
|
|
+ // 获取音频时长
|
|
|
+ this.$set(content, 'voiceDuration', Math.ceil(audio.duration));
|
|
|
+ });
|
|
|
+ // 使用 $set 确保响应式更新
|
|
|
+ this.$set(content, 'voiceUrl', res.silkUrl);
|
|
|
+ this.$set(content, 'mp3Url', res.mp3Url);
|
|
|
+ } else {
|
|
|
+ this.msgError(res.msg);
|
|
|
+ }
|
|
|
+ this.voiceLoading = false;
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeAvatarUploadVoice(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 10; // 假设语音文件大小限制为10MB
|
|
|
+ const isVoiceType = ['audio/mp3', 'audio/mpeg', 'audio/wav', 'audio/x-wav'].includes(file.type);
|
|
|
+
|
|
|
+ if (!isVoiceType) {
|
|
|
+ this.$message.error('仅支持上传 MP3, WAV, X-WAV 格式的语音文件!');
|
|
|
+ return reject(false); // 不允许继续上传
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!isLt10M) {
|
|
|
+ this.$message.error('上传大小不能超过 10MB!');
|
|
|
+ return reject(false); // 不允许继续上传
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用 FileReader 读取文件
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = (event) => {
|
|
|
+ const audio = new Audio(event.target.result);
|
|
|
+ audio.addEventListener('loadedmetadata', () => {
|
|
|
+ // 获取时长并保存
|
|
|
+ if (Math.ceil(audio.duration) > 30) {
|
|
|
+ this.$message.error('音频时长不能超过30秒！');
|
|
|
+ this.voiceLoading = false;
|
|
|
+ return reject(false); // 不允许继续上传
|
|
|
+ }
|
|
|
+ resolve(true); // 允许上传
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ reader.onerror = () => {
|
|
|
+ this.$message.error('无法读取音频文件！请上传正确的音频文件');
|
|
|
+ reject(false); // 不允许继续上传
|
|
|
+ };
|
|
|
+
|
|
|
+ this.voiceLoading = true;
|
|
|
+ reader.readAsDataURL(file); // 开始读取文件
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 查询sop模板列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listSopTemp(this.queryParams).then(response => {
|
|
|
+ this.sopTempList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.$store.dispatch("tagsView/delView", this.$route);
|
|
|
+ this.$router.replace('/qw/conversion/sopTemp')
|
|
|
+ // this.reset();
|
|
|
+
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ name: null,
|
|
|
+ setting: null,
|
|
|
+ status: "0",
|
|
|
+ sort: null,
|
|
|
+ createTime: null,
|
|
|
+ createBy: null,
|
|
|
+ companyId: null
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(id) {
|
|
|
+ getSopTemp(id).then(response => {
|
|
|
+ this.videoList = []
|
|
|
+ this.form = response.data;
|
|
|
+ this.setting = this.form.list || [];
|
|
|
+
|
|
|
+ if (Array.isArray(this.setting)) {
|
|
|
+ this.setting.forEach(item => {
|
|
|
+ if (item && Array.isArray(item.content)) {
|
|
|
+ item.content.forEach(content => {
|
|
|
+ if (content.isAtAll === undefined || content.isAtAll === null) {
|
|
|
+ this.$set(content, 'isAtAll', '0') // 默认关闭
|
|
|
+ }
|
|
|
+ // 如果后端返回的是数字，转换为字符串
|
|
|
+ if (typeof content.isAtAll === 'number') {
|
|
|
+ this.$set(content, 'isAtAll', content.isAtAll.toString())
|
|
|
+ }
|
|
|
+ if (content && Array.isArray(content.setting)) {
|
|
|
+ content.setting.forEach(setList => {
|
|
|
+ if (setList && !Object.hasOwn(setList, 'isSalesCallAdded')) {
|
|
|
+ this.$set(setList, 'isSalesCallAdded', false);
|
|
|
+ }
|
|
|
+ if (setList && !Object.hasOwn(setList, 'isUserNameCallAdded')) {
|
|
|
+ this.$set(setList, 'isUserNameCallAdded', false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.form.list.forEach(e => e.newDay = e.dayNum)
|
|
|
+ this.dayList = JSON.parse(JSON.stringify(this.form.list));
|
|
|
+ this.videoList.push([]);
|
|
|
+ this.addTag = [];
|
|
|
+ this.setting.forEach(item => {
|
|
|
+ if (item && Array.isArray(item.content)) {
|
|
|
+ item.content.forEach(content => {
|
|
|
+ this.addTag.push({
|
|
|
+ addTag: content.addTag ? JSON.parse(content.addTag) : [],
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ delTag: content.delTag ? JSON.parse(content.delTag) : [],
|
|
|
+ delTagVisible: false,
|
|
|
+ delTagValue: ''
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // this.addTag.push({
|
|
|
+ // addTag: [],
|
|
|
+ // inputVisible: false,
|
|
|
+ // inputValue: '',
|
|
|
+ // delTag: [],
|
|
|
+ // delTagVisible: false,
|
|
|
+ // delTagValue: ''
|
|
|
+ // })
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const ids = row.id || this.ids;
|
|
|
+ this.$confirm('是否确认删除sop模板编号为"' + ids + '"的数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function () {
|
|
|
+ return delSopTemp(ids);
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ const queryParams = this.queryParams;
|
|
|
+ this.$confirm('是否确认导出所有sop模板数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ this.exportLoading = true;
|
|
|
+ return exportSopTemp(queryParams);
|
|
|
+ }).then(response => {
|
|
|
+ this.download(response.msg);
|
|
|
+ this.exportLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ updateHtml(val,content) {
|
|
|
+ val || val();
|
|
|
+ if(!!content && !!content.liveId ){
|
|
|
+ content.liveId = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateAll(setIndex, list, fieldName, newVal) {
|
|
|
+ if(this.form.sendType == 11 && setIndex == 0) {
|
|
|
+ console.info("更新数据", newVal)
|
|
|
+ for (let index in list.content) {
|
|
|
+ this.$set(list.content[index].setting[0], fieldName, newVal);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
