|
|
@@ -1,52 +1,97 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
-
|
|
|
- <div style="margin: 30px;" v-if="this.form.sendType == 1 && formType==1 "> sop规则【修改企微接口】模板</div>
|
|
|
- <div style="margin: 30px;" v-if="this.form.sendType == 1 && formType==2 "> sop规则【复制企微接口】模板</div>
|
|
|
- <div style="margin: 30px;" v-if="this.form.sendType == 1 && formType==3 "> sop规则【查看企微接口】模板</div>
|
|
|
- <div style="margin: 30px;" v-if="this.form.sendType == 2 && formType==1 "> sop规则【修改群发助手】模板</div>
|
|
|
- <div style="margin: 30px;" v-if="this.form.sendType == 2 && formType==2 "> sop规则【复制群发助手】模板</div>
|
|
|
- <div style="margin: 30px;" v-if="this.form.sendType == 2 && formType==3 "> sop规则【查看群发助手】模板</div>
|
|
|
- <div style="margin: 30px;">模板编号：【{{ this.form.id }}】</div>
|
|
|
-
|
|
|
- <div style="margin-top: 10px;margin-left: 50px;margin-right: 100px;margin-bottom: 60px;">
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
- <el-form-item label="名称" prop="name">
|
|
|
- {{ form.name }}
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="状态">
|
|
|
- <el-tag v-for="dict in statusOptions" v-if="dict.dictValue == form.status">{{ dict.dictLabel }}</el-tag>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="间隔天数" prop="gap">
|
|
|
- {{ form.gap }}天
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="规则" prop="setting">
|
|
|
- <el-link type="primary" class="el-icon-plus" :underline="false" @click='addSetting()'
|
|
|
- v-if="form.sendType != 4 && formType != 3 && roles.includes('add_sop_temp_day')">添加天数
|
|
|
- </el-link>
|
|
|
- <el-link type="primary" class="el-icon-sort" :underline="false" @click='openUpdateDaySorts()'
|
|
|
- style="margin-left: 20px"
|
|
|
- v-if="form.sendType != 4 && formType != 3">修改天数排序
|
|
|
- </el-link>
|
|
|
- <el-link type="primary" class="el-icon-sort" :underline="false" @click='openUpdateSorts()'
|
|
|
- style="margin-left: 20px"
|
|
|
- v-if="form.sendType != 4 && formType != 3">修改规则排序
|
|
|
- </el-link>
|
|
|
- <el-link type="primary" class="el-icon-plus" :underline="false" @click='addSetting()'
|
|
|
- v-if="form.sendType == 4 && (formType != 3 && setting.length < 1) && roles.includes('add_sop_temp_day')">添加天数
|
|
|
- </el-link>
|
|
|
+ <div class="app-container sop-temp-container">
|
|
|
+ <!-- 页面头部 -->
|
|
|
+<!-- <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="form.sendType != 4 && 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="form.sendType != 4 && formType != 3">
|
|
|
+ 修改天数排序
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-sort"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click='openUpdateSorts()'
|
|
|
+ v-if="form.sendType != 4 && formType != 3">
|
|
|
+ 修改规则排序
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="small"
|
|
|
+ @click='addSetting()'
|
|
|
+ v-if="form.sendType == 4 && (formType != 3 && setting.length < 1) && roles.includes('add_sop_temp_day')">
|
|
|
+ 添加天数
|
|
|
+ </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">
|
|
|
+ :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">
|
|
|
<el-col :span="22">
|
|
|
- <div
|
|
|
- style="background-color: #fbfbfb;padding: 15px; border: 1px solid #e6e6e6; margin-bottom: 20px;">
|
|
|
- <el-form :model="item" label-width="80px">
|
|
|
+ <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="内容名称,仅内部可见"/>
|
|
|
@@ -75,28 +120,34 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="规则">
|
|
|
+ <el-form-item label="规则" class="rule-content-item">
|
|
|
<div v-for="(content, contentIndex) in item.content" :key="contentIndex"
|
|
|
- style="background-color: #fdfdfd;padding: 15px; border: 1px solid #e6e6e6; margin-bottom: 20px;">
|
|
|
+ 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="70px">
|
|
|
+ <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">
|
|
|
- <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: 100px;height: 20px;">
|
|
|
- </el-time-picker>
|
|
|
- </el-form-item>
|
|
|
+ <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">
|
|
|
+ <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"
|
|
|
@@ -105,11 +156,11 @@
|
|
|
value-format="HH:mm"
|
|
|
format="HH:mm"
|
|
|
placeholder="时间"
|
|
|
- style="width: 100px;height: 20px;">
|
|
|
+ style="width: 120px;">
|
|
|
</el-time-picker>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
- <el-form-item label="官方群发" v-if="contentIndex==0 && content.type==2 && form.sendType != 4">
|
|
|
+ <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"
|
|
|
@@ -117,13 +168,13 @@
|
|
|
active-value="1"
|
|
|
inactive-value="0">
|
|
|
</el-switch>
|
|
|
- <div style="color: #999;font-size: 14px;display: flex;align-items: center;margin-bottom: 5px">
|
|
|
+ <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">
|
|
|
+ <el-form-item label="是否@所有人" v-if="form.sendType != 4" class="switch-form-item">
|
|
|
<el-switch
|
|
|
v-model="content.isAtAll"
|
|
|
active-color="#13ce66"
|
|
|
@@ -131,8 +182,7 @@
|
|
|
:active-value="1"
|
|
|
:inactive-value="0">
|
|
|
</el-switch>
|
|
|
- <div
|
|
|
- style="color: #999;font-size: 14px;display: flex;align-items: center;margin-bottom: 5px">
|
|
|
+ <div class="form-tip-info">
|
|
|
<i class="el-icon-info"></i>
|
|
|
开启后将在群发消息时@所有人（默认关闭）
|
|
|
</div>
|
|
|
@@ -150,7 +200,7 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="消息类别" v-if="form.sendType != 4 && form.sendType != 5">
|
|
|
+ <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)">
|
|
|
@@ -174,42 +224,45 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程" v-if="content.type == 2 && form.sendType != 5" required>
|
|
|
- <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.courseId"
|
|
|
- placeholder="请选择课程" style=" margin-right: 10px;" size="mini" 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="mini" style=" margin-right: 10px;" 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>
|
|
|
- <el-select :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" 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 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-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 ">
|
|
|
@@ -276,12 +329,18 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<div v-for="(setList, setIndex) in content.setting" :key="setIndex"
|
|
|
- style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;"
|
|
|
+ class="setting-item-card"
|
|
|
v-if="content.type != 4 && content.type != 5">
|
|
|
- <el-row style="padding-bottom: 20px">
|
|
|
+ <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="70px">
|
|
|
- <el-form-item label="内容类别" style="margin: 2%">
|
|
|
+ <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>-->
|
|
|
@@ -341,62 +400,78 @@
|
|
|
:ref="`textarea-${index}-${contentIndex}-${setIndex}`"
|
|
|
/>
|
|
|
|
|
|
- <!-- 修改按钮部分 -->
|
|
|
- <el-link
|
|
|
- v-if="(setList.contentType == 1 || setList.contentType == 15) && roles.includes('edit_sop_temp_content')"
|
|
|
- type="primary"
|
|
|
- @click="toggleSalesCall(index, contentIndex, setIndex)"
|
|
|
- style="margin-top: 10px;"
|
|
|
- >
|
|
|
- {{ setList.isSalesCallAdded ? '移除#销售称呼#' : '添加#销售称呼#' }}
|
|
|
- </el-link>
|
|
|
- <el-link
|
|
|
- v-if="(setList.contentType == 1 || setList.contentType == 15) && roles.includes('edit_sop_temp_content')"
|
|
|
- type="primary"
|
|
|
- @click="toggleUserNameCall(index, contentIndex, setIndex)"
|
|
|
- style="margin-top: 10px; margin-left: 20px"
|
|
|
- >
|
|
|
- {{ setList.isUserNameCallAdded ? '移除#客户称呼#' : '添加#客户称呼#' }}
|
|
|
- </el-link>
|
|
|
+ <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>
|
|
|
|
|
|
- <ImageUpload :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-if="setList.contentType == 2 "
|
|
|
- v-model="setList.imgUrl"
|
|
|
- type="image" :num="1" :width="150" :height="150"/>
|
|
|
+ <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">
|
|
|
- <el-form-item label="链接标题:" label-width="100px" required>
|
|
|
+ <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-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>
|
|
|
+ <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 " style="margin-top: 1%">
|
|
|
- <el-form-item label="链接地址:" label-width="100px" required>
|
|
|
+ <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 ">
|
|
|
- <el-form-item label="链接地址:" label-width="100px">
|
|
|
- <el-tag type="warning" v-model="setList.isBindUrl = 1 ">选择的课程小节
|
|
|
- 即为卡片链接地址
|
|
|
+ <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>
|
|
|
@@ -404,8 +479,12 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-if="setList.contentType == 4 || setList.contentType == 10">
|
|
|
- <el-card class="box-card">
|
|
|
- <el-form-item label="标题" prop="miniprogramTitle">
|
|
|
+ <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)"
|
|
|
@@ -413,7 +492,7 @@
|
|
|
maxlength="64" type="textarea"
|
|
|
@input="checkByteLength(content,setList.contentType,content.isOfficial)"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="封面" prop="miniprogramPicUrl">
|
|
|
+ <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)"
|
|
|
@@ -433,9 +512,12 @@
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div v-if="setList.contentType == 12">
|
|
|
- <!-- <div >-->
|
|
|
- <el-card class="box-card">
|
|
|
- <el-form-item label="直播间" >
|
|
|
+ <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
|
|
|
@@ -450,11 +532,11 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="标题" prop="miniprogramTitle">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
@@ -467,9 +549,13 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div v-if="setList.contentType == 5 ">
|
|
|
-
|
|
|
- <el-form-item label="上传文件:" prop="fileUrl" label-width="100px">
|
|
|
+ <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"
|
|
|
@@ -485,11 +571,16 @@
|
|
|
{{ setList.fileUrl }}
|
|
|
</el-link>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="setList.contentType == 6 ">
|
|
|
- <el-form-item label="上传视频：" prop="videoUrl" label-width="100px">
|
|
|
+ <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"
|
|
|
@@ -505,6 +596,7 @@
|
|
|
controls style="width: 200px;height: 100px">
|
|
|
</video>
|
|
|
</el-form-item>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
<div v-if="setList.contentType == 7 || setList.contentType == 16">
|
|
|
<el-input
|
|
|
@@ -559,8 +651,12 @@
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div v-if="setList.contentType == 14">
|
|
|
- <el-card class="box-card">
|
|
|
- <el-form-item label="福袋名称" >
|
|
|
+ <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)" >
|
|
|
@@ -572,7 +668,7 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="福袋状态" >
|
|
|
+ <el-form-item label="福袋状态">
|
|
|
<el-tag :disabled="formType == 3" :type="setList.luckyBagDataStatus == 1 ? 'success' : 'danger'">
|
|
|
{{ setList.luckyBagDataStatus == 1 ? '启用' : '禁用' }}
|
|
|
</el-tag>
|
|
|
@@ -616,7 +712,7 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
- <el-form v-if="form.sendType == 4" :model="setList" label-width="70px">
|
|
|
+ <el-form v-if="form.sendType == 4" :model="setList" label-width="100px" class="content-form">
|
|
|
<el-form-item label="添加客服" prop="intervalTime" style="margin: 2%">
|
|
|
<el-input-number
|
|
|
v-model="setList.intervalTime"
|
|
|
@@ -673,8 +769,7 @@
|
|
|
</el-link>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
-
|
|
|
- </div>
|
|
|
+ </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)) + '天' }}）
|
|
|
@@ -694,26 +789,48 @@
|
|
|
append-to-body>
|
|
|
<userVideo ref="QwUserVideo" @videoResult="qwUserVideoResult"></userVideo>
|
|
|
</el-dialog>
|
|
|
- <el-dialog title="修改天数排序" :visible.sync="openSort" style="width: 1500px" append-to-body>
|
|
|
- <draggable v-model="dayList" @end="onDragEndDay" style="padding: 20px">
|
|
|
- <el-button v-for="(item, index) in dayList" :class="item.newDay != item.dayNum ? 'red':''">第{{
|
|
|
- item.newDay
|
|
|
- }}天（第{{ item.dayNum }}天）
|
|
|
- </el-button>
|
|
|
- </draggable>
|
|
|
-
|
|
|
- <div style="float: right;">
|
|
|
- <el-button type="primary" @click="saveSorts">保存</el-button>
|
|
|
+ <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" style="width: 1500px" append-to-body>
|
|
|
- <draggable v-model="ruleList" @end="onDragEnd" style="padding: 20px">
|
|
|
- <el-button v-for="(item, index) in ruleList">{{ item.time }}</el-button>
|
|
|
- </draggable>
|
|
|
-
|
|
|
- <div style="float: right;">
|
|
|
- <el-button @click="autoSortsRules">自动排序</el-button>
|
|
|
- <el-button type="primary" @click="saveSortsRules">保存</el-button>
|
|
|
+ <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>
|
|
|
@@ -734,12 +851,12 @@
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
|
|
|
-.custom-input /deep/ .el-input__inner {
|
|
|
+.custom-input ::v-deep .el-input__inner {
|
|
|
height: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
-.custom-input /deep/ .el-input__icon {
|
|
|
+.custom-input ::v-deep .el-input__icon {
|
|
|
line-height: 10px;
|
|
|
}
|
|
|
|
|
|
@@ -747,7 +864,7 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-/deep/ .el-badge__content.is-fixed {
|
|
|
+::v-deep .el-badge__content.is-fixed {
|
|
|
top: 10px !important;
|
|
|
right: 0 !important;
|
|
|
width: 8px;
|
|
|
@@ -763,6 +880,780 @@
|
|
|
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;
|
|
|
+}
|
|
|
+
|
|
|
+/* 天内容卡片 */
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header-mini {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ padding: 12px 16px;
|
|
|
+ background: linear-gradient(135deg, #f9fafb 0%, #f0f4f8 100%);
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ margin: -20px -20px 16px -20px;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.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 .el-form-item,
|
|
|
+.link-card .el-form-item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.msg-category-item ::v-deep .el-radio-group {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.msg-category-item ::v-deep .el-radio {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 课程选择区域 */
|
|
|
+.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';
|
